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
来源：掘金