本文共 1301 字，大约阅读时间需要 4 分钟。

PostCSS PxToRem 配置说明及实际应用示例

1. 配置说明

在项目中，postcss-px-to-rem 是一个非常实用的工具，用于将设计稿中的px单位转换为rem单位。以下是我们项目中的具体配置：

postCssPxToRem({  rootValue: 1125, // 设计图最大宽度  propList: ['*'], // 需要转换的属性，这里选择全部转换  selectorBlackList: ['van', 'jjw', /^\.aaa$/], // 需要排除的选择器  exclude: 'test' // 需要排除的路径})

配置解释

• rootValue: 设计图的最大宽度，我们通常取最大宽度除以10得到rootValue。例如，750px的设计图会转换为75rem，1125px则会转换为112.5rem。
• propList: 需要转换的属性列表，这里选择'*'，表示将所有属性都转换。
• selectorBlackList: 需要排除转换的选择器列表。这里我们排除了van、jjw以及以.aaa开头的选择器。
• exclude: 需要排除的文件路径或关键字。这里我们设置为'test'，表示所有包含test的文件路径中的px不进行转换。

2. 应用场景

在app.vue中，我们有如下样式：

.van-test {  height: 50px;  background-color: pink;}.vvvan-test {  height: 50px;  background-color: greenyellow;}.test {  height: 50px;  background-color: deeppink;}.jjw {  height: 50px;  background-color: yellow;}

3. 结果展示

在生产环境中，我们可以看到以下效果：

• van-test 和 jjw-test 的样式会被完全排除（px 不转换为 rem）。
• vvvan-test-test 和 test 的样式会被部分排除，只有px 转换为 rem。
• 自定义样式box 的样式会被正常转换。

4. 导入样式

在app.vue中，我们导入了assets/test.less，其中包含如下样式：

.box {  height: 50px;  background-color: palegreen;}

5. 结果展示

在实际应用中，我们可以看到以下效果：

• van-test 和 jjw-test 的样式不会被转换为 rem。
• vvvan-test-test 和 test 的样式会被部分转换。
• 自定义样式box 会被正常转换。

通过上述配置，我们可以灵活控制哪些样式需要转换，哪些样式需要保留为 px。这种方式既方便了开发，也提高了项目的兼容性。

转载地址：http://tjxfk.baihongyu.com/