vue-cli3.0 使用 postcss-pxtorem px转rem
1. 安装依赖包 npm install postcss-pxtorem --save-dev
2. 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中。
module.exports = { productionSourceMap: false, // 生产环境是否生成 SourceMap css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 换算的基数 selectorBlackList: [], // 忽略转换正则匹配项 propList: ['*'], }), ] } } }, }
可能遇到的坑:
插件会转化所有的样式的px。比如引入了三方UI,也会被转化。可以使用selectorBlackList字段来过滤。
如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。