postcss-pxtorem px不转换为rem的做法

最新推荐文章于 2024-02-20 11:23:54 发布

web老张头

最新推荐文章于 2024-02-20 11:23:54 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： postcss 前端 elementplus

本文链接：https://blog.csdn.net/sinat_36194710/article/details/131207942

在不修改VSCodeVetur配置的情况下，通过使用postCssPxToRem插件来控制px到rem的转换。设置rootValue、propList和selectorBlackList，例如将所有属性转换，但排除以-nopx结尾的class。这样可以确保特定元素不被转换，如<divid=lightEchart-nopx></div>。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些场景是不要px转为rem的时候，如果不想设置vscode的vetur的设置，当然也不建议设置，除非团队每个人都设置，要不然就会被保存格式化，PX都会转为px，所以采用如下做法：

          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 192, // 根据设计图尺寸写，设计图是 1920，就写 192
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['-nopx'], // 过滤掉-nopx结尾的class，不进行rem转换
          }),

实际代码设置如下：