webpack sass 单行注释报错

最新推荐文章于 2023-10-18 11:29:29 发布

just_a_code_man

最新推荐文章于 2023-10-18 11:29:29 发布

阅读量1.8k

点赞数 1

文章标签： webpack sass javascript

本文链接：https://blog.youkuaiyun.com/just_a_code_man/article/details/121930107

版权

在使用自己搭起来的 webpack 环境时发现在sass中使用单行注释的语法会报如下错误

ERROR in ./src/component/Body/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/component/Body/index.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'nodes' of undefined
    at getCustomPropertiesFromRoot (/Users/bytedance/Desktop/react-cli/node_modules/postcss-custom-properties/index.cjs:48:8)
    at Object.prepare (/Users/bytedance/Desktop/react-cli/node_modules/postcss-custom-properties/index.cjs:491:28)
    at /Users/bytedance/Desktop/react-cli/node_modules/postcss/lib/lazy-result.js:149:39

排查后发现是在打包 sass时没有配置解析器导致的，解决后配置如下

{
        // 匹配sass
        test: /\.(scss|sass)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                parser:'postcss-scss',//此处配置scss解析器
                plugins: [
                  'postcss-preset-env',
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    propWhiteList: [],
                    minPixelValue: 2,
                  }),
                ],
              },
            },
          },
        ],
      }