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

qingtonghub發表於2018-11-21
postcss-px2rem在官方文件中說

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

即在css中使用/*no*/時不會將px轉換成rem,使用/*px*/時會將css中的px轉換成

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

當然baseDpr是可配置的,預設是2,則預設將css中的px按照dpr=2來轉換。

But......

在使用的時候發現

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

我的期望(*^▽^*)

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;
}複製程式碼

然而被現實狠狠打臉→_→

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

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

scss: generateLoaders('sass', {outputStyle:'expanded'}),複製程式碼

具體見github.com/neilgao000/…

結果

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

如果vue-loader是11.x的就需要配置{outputStyle:'expanded'},若vue-loader到12、13以後就不需要配置這個引數了

vue-loader文件裡面有提到過這個引數vue-loader-v14.vuejs.org/zh-cn/confi…

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

npm上sass-node中也有這個引數www.npmjs.com/package/nod…

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



相關文章