vue cli3 添加 px2rem-loader 樣式嵌套問題

一開始在項目使用 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-loaderpx2rem-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 插入就可以生效。

參考資料:
When using "less" in vue single component file and "px2rem-loader", it will report "undefined missing '}'" error · Issue #1706 · vuejs/vue-cli

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 我們經常指責誰家的小孩不聽父母的話,但似乎從來沒有怪罪過哪個大人不聽小孩的吧? 現在的社會,父母為了讓孩子贏在起跑...
    凌若晨軒閱讀 643評論 0 0
  • 9月1日,開學的日子。 早早起來,兒子的情緒便有點波動。 幼兒園大班的他,已經開始習慣9月1日開學這件事。但今年似...
    常錦閱讀 586評論 0 51
  • 一枝獨秀是一種姿勢,花團錦簇是一種氣勢-------題記 暮春,周末,午后,微醺。 一時興起,相邀賞花。 (待續)
    子非魚lily閱讀 274評論 0 2
  • 我家的大狗,早已忘記從何時把它帶回家了,那時候它很小,經過時間的推移,出落的儀表堂堂高大威猛,它與我們一起成長,也...
    致suzi閱讀 297評論 0 1
  • 黑色的薄款及膝連衣裙,簡單,素雅。三葉草的經典小白鞋,偏乳白色的短襪,齊肩短發,精致的五官,淡淡的妝容,安靜的表情...
    CalmEsae閱讀 294評論 0 4