vue-cli3.0 使用 postcss-pxtorem px轉rem
阿新 • • 發佈:2019-01-29
pos otv source .config npm root stc class cto
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 。
vue-cli3.0 使用 postcss-pxtorem px轉rem