抛弃你传统的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
来源：掘金