vue引入外部css scss文件 怎么自動px轉rem

拋棄你傳統的px2remLoader方法吧  這個方法好像是只能在vue文件的style里面的樣式生效

換成這個   

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

 

1、在main.js中引入lib-flexible

import 'amfe-flexible'

2、配置postcss-pxtorem

      vue-cli2 的配置---在 .postcss.js 文件中的plugins下新增postcss-pxtorem的配置

      vue-cli3 配置方式：在根路徑下新增 postcss.config.js 文件,放入下述同樣的代碼

 

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": {
rootValue: 37.5, // 基准值(計算公式：設計圖寬度/10)，設計圖尺寸為375，基准值為375/10=37.5
propList: ['*'], // 需要被轉換的屬性
selectorBlackList: [] // 不進行px轉換的選擇器
}
}
}

 

 3、直接根據設計稿的尺寸寫px就行

 

 4、注意：該插件不能轉換行內樣式中的 px

 

參考這個作者小姐姐：一枚前端小姐姐
鏈接：https://juejin.im/post/6871556306487443470
來源：掘金