webpack自定义loader与vue-loader的执行顺序

Question

使用postcss插件postcss-pxtorem时，发现不能处理行内样式，自己复制粘贴弄了一个loader，在vue.config.js中这样引入:

module: {  
  rules:[  
    {  
     test: /.vue$/,  
     use: [{  
         loader: path.resolve('./src/config/inline-pxtorem.js'),  
         options: {}  
     }]  
    }  
  ]  
 }

这样可以处理一般的（写死的）行内样式，但是对于js/vue返回的行内样式却无能为力。猜测原因是自定义loader在vue-loader等loader前执行了。

那么有什么好的解决方案或思路呢？

Answer 1

行内样式很多是计算出来的,编译时根本无法确定数值是多少,你如何转换?

可以在vue.prototype上绑一个rem处理函数

Vue.prototype.rem = (value) => value / 37.5 + "rem";

模板

<div :style="`width: ${rem(37.5)}`"></div>

Answer 2

vue-loader的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。
打包的时候只是将你vue文件转为js文件，不太可能去处理运行时的行内样式