一開始在項目使用 px2rem-loader 的時候我是這樣配置的:
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.use('px2rem-loader')
.loader('px2rem-loader')
.options({
remUnit: 108,
remPrecision: 8
})
}
}
一開始使用的時候沒什么問題,直到要在 scss 里使用樣式嵌套的時候出問題了,
報錯:"px2rem-loader", it will report "undefined missing '}'" error
對比了能正常運行的項目,發現 px2rem-loader
是在 sass-loader
之前配置的,而用了 webpack-chain 后生產的配置中 px2rem-loader
是在 sass-loader
之后,所以解決的方法就是怎么配置可以讓 px2rem-loader
的配置可以放在 sass-loader
之前。
翻看了 webpack-chain 的文檔似乎都沒有可以用來插入的,嘗試將 rule 中 sass-loader
的配置清除,手動在 vue.config.js
里再寫一次 sass-loader
也不行。
折騰了2個小時,決定在 vue-cli 的 issue 上找找,發現一找就找到了[捂臉]。
按 issue 的說法,原因確實是 sass-loader
和 px2rem-loader
的順序問題,然后給了正確的插入方法:
config.module
.rule('scss')
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 75, remPrecision: 8 })
.end()
把 px2rem-loader
放在了 postcss-loader
之前。這也說明了,wepack 的rule 讀取是從后往前讀取的。正常情況下應該是先經過 sass-loader
轉化為 css 后再經過 px2rem-loader
,如果先經過px2rem-loader
就會有讀不懂嵌套語法的情況所以報錯了。
插入的語法就是用 before()
指定插在哪個 use
之前。
我把配置 inspect
出來發現 oneOf
有很多個,不知道單獨在 vue
這個 oneOf 插入就可以生效。