Webpack中sass-loader编译报错：Cannot read property 'sassLoader' of undefined

我之前调试Webpack配置时也碰到过完全一样的报错，折腾了好一会儿才找到根源，给你分享几个最可能的解决方向：

1. 先修正exclude的写法（最常见的坑） #

你配置里的exclude: '/node_modules/'是字符串形式，但Webpack的exclude需要正则表达式或者绝对路径，字符串会被当成精确的绝对路径匹配，基本不可能命中你的node_modules文件夹，导致sass-loader误处理了node_modules里的文件，触发类型错误。

把配置改成这样：

// 方法1：用正则表达式
{ 
  test: /\.scss$/, 
  exclude: /node_modules/, // 这里改成正则
  use: [ 'style-loader', 'css-loader', 'sass-loader', ], 
}

// 方法2：用绝对路径（需要先引入path模块）
const path = require('path');
// ...
{ 
  test: /\.scss$/, 
  exclude: path.resolve(__dirname, 'node_modules'), // 绝对路径更可靠
  include: path.resolve(__dirname, 'src'), // 加上include精准指定要处理的目录，避免意外
  use: [ 'style-loader', 'css-loader', 'sass-loader', ], 
}

2. 对齐sass-loader与依赖的版本兼容性 #

这个报错很大概率是版本不兼容导致的：sass-loader依赖sass（dart-sass）或者node-sass，但不同版本的sass-loader对这两个库的支持不一样，比如高版本sass-loader已经不再支持node-sass了。

可以按以下步骤重置依赖：

# 先卸载所有相关包
npm uninstall sass-loader css-loader style-loader node-sass sass

# 安装经过验证的兼容版本组合（适配Webpack 5）
npm install sass-loader@13.3.2 css-loader@6.8.1 style-loader@3.3.3 sass@1.63.6 --save-dev

如果你的Webpack是4.x版本，就换成对应兼容的版本（比如sass-loader@8.x）。

3. 清除缓存并重新编译 #

有时候Webpack的缓存或者node_modules里的残留文件会导致奇怪的问题，试试彻底清理后重新安装：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清除Webpack缓存（如果用了cache插件）
npx webpack --no-cache

4. 检查你的main.scss文件 #

如果你的main.scss里引入了node_modules中的scss文件，而你又用exclude排除了node_modules，那也会导致编译失败。这种情况要么调整exclude规则，要么确保引入的文件在include范围内。

内容的提问来源于stack exchange，提问作者Mr.Seiryk