postcss-rpx2vw

介绍

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

示例：

1/* 转换前 */
2div {
3  width: 100rpx;
4}
5
6/* 转换后 */
7div {
8  width: 50vw;
9}

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

1{
2  "node": ">=14.x.x",
3  "npm": ">=6.x.x"
4}

安装

1$ npm i postcss-rpx2vw -D

使用教程

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

1// 默认参数
2const defaultOptions = {
3  // 设计稿宽度
4  viewportWidth: 750,
5  // 转换后的视口单位
6  viewportUnit: 'vw',
7  // 转换后的字体视口单位
8  fontViewportUnit: 'vw',
9  // 单位精度
10  unitPrecision: 10,
11};

在构建配置文件里使用

1// vite
2import { defineConfig } from 'vite';
3import rpx2vw from 'postcss-rpx2vw';
4
5export default defineConfig({
6  css: {
7    postcss: {
8      plugins: [rpx2vw()],
9    },
10  },
11});
12
13// webpack
14// 需要下载对应依赖包，案例用css举例
15module.exports = {
16  rules: [
17    {
18      test: /\.css$/,
19      use: [
20        'style-loader',
21        'css-loader',
22        {
23          loader: 'postcss-loader',
24          options: {
25            postcssOptions: {
26              plugins: ['postcss-rpx2vw'],
27            },
28          },
29        },
30      ],
31    },
32  ],
33};