Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

问题描述

在webpack的时候报错

ERROR in ./packages/theme-chalk/mixins/mixins.scss (./node_modules/css-loader/dist/cjs.js!./packages/theme-chalk/mixins/mixins.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):        
CssSyntaxError

(14:8) C:\Users\Sherry\Desktop\vue-element\packages\theme-chalk\mixins\mixins.scss Unknown word
 @mixin b($block) {
  13 |     $B: '$namespace + '-' + $block';
> 14 |     .#{$B} {
     |        ^
  15 |         @content;
  16 |       }

搜了很多，有说webpack配置的时候style-loader得在css-loader之前use

{
	test: /\.(scss|css)$/i,
		use: [
			'style-loader',
			'css-loader',
			'sass-loader',
		],
}

看了一下顺序是灭有问题的。然后又看到说版本问题，但是在github上看了版本也是正确的，所以我就降了webpack的版本然后疯狂yarn add和remove了两个下午。。。还是没用

原因分析

最后在StackOverflow搜到了：finos/perspective-viewer: css-loader throws CssSyntaxError on 'exports'
感谢老师救我一命，是配置规则的时候少use了一个file-loader造成的，但是我不是很懂为什么，，，因为我看的视频里也没use这个。

解决方案

在webpack.config.jscss的配置的最前面添加file-loader

{
	test: /\.(scss|css)$/i,
		use: [
			'file-loader',
			'style-loader',
			'css-loader',
			'sass-loader',
		],
}

感动555 TT

webpack 5.59.0 compiled successfully in 3459 ms