记一些vue使用postcss中遇到的坑o(╯□╰)o

postcss-px2rem在官方文档中说

即在css中使用/*no*/时不会将px转换成rem，使用/*px*/时会将css中的px转换成

当然baseDpr是可配置的，默认是2，则默认将css中的px按照dpr=2来转换。

But......

在使用的时候发现

我的期望(*^▽^*)

border-radius: 4px;
border: 1px solid #e7e7e7;

[data-dpr="1"] .selector {
    font-size: 8px;
}
[data-dpr="2"] .selector {
    font-size: 16px;
}
[data-dpr="3"] .selector {
    font-size: 24px;
}复制代码

然而被现实狠狠打脸→_→

然后一顿github后把build/utils.js中的scss加上outputStyle:'expanded'

scss: generateLoaders('sass', {outputStyle:'expanded'}),复制代码

具体见github.com/neilgao000/…

结果

如果vue-loader是11.x的就需要配置{outputStyle:'expanded'}，若vue-loader到12、13以后就不需要配置这个参数了

vue-loader文档里面有提到过这个参数vue-loader-v14.vuejs.org/zh-cn/confi…

npm上sass-node中也有这个参数www.npmjs.com/package/nod…

转载于:https://juejin.im/post/5bf54587e51d457325491f43