vue3.0中使用postcss-pxtorem的具体方法

在vue3.0中使用postcss-pxtorem，需要遵守以下步骤：

步骤一：安装依赖

首先需要在项目中安装 postcss-pxtorem 和 postcss-loader 两个依赖。

npm install postcss-pxtorem postcss-loader --save-dev

步骤二：配置构建工具webpack

在webpack.config.js中添加postcss相关配置：

module.exports = {
  // ...其他配置...
  module: {
    rules: [
      // ...其他规则...
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-pxtorem',
                    {
                      rootValue: 100, // 设计稿尺寸 / 10，如设计稿为 750px，则 rootValue 为 75
                      propList: ['*', '!border'], // 对所有css属性进行转换，但是不包括border
                      unitPrecision: 5, // 转换后的rem值保留5位小数
                      selectorBlackList: [], // 不转换的class，可以用正则匹配
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

步骤三：使用

在需要使用px单位的地方，直接使用px即可。postcss会自动将px转换成rem，例如：

/* 在样式中使用px */
.my-div {
  width: 100px;
  font-size: 16px;
}

转换后的效果如下：

/* 转换后的样式 */
.my-div {
  width: 1rem; /* 100 / 100 */
  font-size: 0.16rem; /* 16 / 100 */
}

示例一：将750px宽度的设计稿转换为rem（假设rootValue为75）

/* 在样式中使用px */
.my-div {
  width: 200px; /* 等价于设计稿上的 200px */
  font-size: 16px;
}

转换后的效果如下：

/* 转换后的样式 */
.my-div {
  width: 2.67rem; /* 200 / 75 */
  font-size: 0.2133rem; /* 16 / 75 */
}

示例二：指定不需要转换的class

/* 在样式中使用px */
.my-div {
  width: 200px; /* 等价于设计稿上的 200px */
  font-size: 16px;
}

.my-rem {
  font-size: 0.16px;
}

转换后的效果如下：

/* 转换后的样式 */
.my-div {
  width: 2.67rem; /* 200 / 75 */
  font-size: 0.2133rem; /* 16 / 75 */
}

.my-rem {
  font-size: 0.16px; /* 不进行转换 */
}

这样就完成了vue3.0中使用postcss-pxtorem的具体方法，可以通过以上步骤和示例进行实践。