在使用自己搭起来的 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,
}),
],
},
},
},
],
}