postcss-rpx2vw

介绍

基于 postcss 实现的一个 css 单位转换插件（支持自定义单位），可以使用 rpx 作为单位书写。

示例：

/* 转换前 */
div {
  width: 100rpx;
}

/* 转换后 */
div {
  width: 50vw;
}

推荐使用的 node 版本和 npm 版本

{
  "node": ">=14.x.x",
  "npm": ">=6.x.x"
}

安装

$ npm i postcss-rpx2vw -D

使用教程

提示：使用前需要先安装 postcss 插件

// 默认参数
const defaultOptions = {
  // 设计稿宽度
  viewportWidth: 750,
  // 转换后的视口单位
  viewportUnit: 'vw',
  // 转换后的字体视口单位
  fontViewportUnit: 'vw',
  // 单位精度
  unitPrecision: 10,
};

在构建配置文件里使用

// vite
import { defineConfig } from 'vite';
import rpx2vw from 'postcss-rpx2vw';

export default defineConfig({
  css: {
    postcss: {
      plugins: [rpx2vw()],
    },
  },
});

// webpack
// 需要下载对应依赖包，案例用css举例
module.exports = {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-rpx2vw'],
            },
          },
        },
      ],
    },
  ],
};