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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们经常指责谁家的小孩不听父母的话,但似乎从来没有怪罪过哪个大人不听小孩的吧? 现在的社会,父母为了让孩子赢在起跑...
    凌若晨轩阅读 3,785评论 0 0
  • 9月1日,开学的日子。 早早起来,儿子的情绪便有点波动。 幼儿园大班的他,已经开始习惯9月1日开学这件事。但今年似...
    常锦阅读 3,674评论 0 51
  • 一枝独秀是一种姿势,花团锦簇是一种气势-------题记 暮春,周末,午后,微醺。 一时兴起,相邀赏花。 (待续)
    子非鱼lily阅读 1,852评论 0 2
  • 我家的大狗,早已忘记从何时把它带回家了,那时候它很小,经过时间的推移,出落的仪表堂堂高大威猛,它与我们一起成长,也...
    致suzi阅读 2,372评论 0 1
  • 黑色的薄款及膝连衣裙,简单,素雅。三叶草的经典小白鞋,偏乳白色的短袜,齐肩短发,精致的五官,淡淡的妆容,安静的表情...
    CalmEsae阅读 2,372评论 0 4