执行npm run build时遇TypeError: this.getOptions is not a function错误求助

错误原因 #

这个报错是css-loader版本与当前Webpack版本不兼容导致的：

• Webpack 4仅支持css-loader 4.x及以下版本，更高版本的css-loader使用了Webpack 5才有的API（this.getOptions）
• Webpack 5需要搭配css-loader 5.x及以上版本

解决方案 #

1. 确认Webpack版本 #

执行命令查看当前项目的Webpack版本：

npm list webpack

2. 安装匹配的loader版本 #

根据Webpack版本选择对应的css-loader和sass-loader版本：

• 如果是Webpack 4：

npm install css-loader@4.3.0 sass-loader@10.1.1 --save-dev

• 如果是Webpack 5：

npm install css-loader@6.8.1 sass-loader@13.3.2 --save-dev

3. 修正Webpack配置中的SCSS规则 #

生产环境下需要用MiniCssExtractPlugin.loader提取CSS到单独文件，且loader顺序必须正确（从右到左执行），修改后的规则如下：

{
  test: /\.s?(a|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader, // 提取CSS为独立文件
    "css-loader",                // 处理CSS中的import、url等
    "sass-loader"                // 编译SCSS为CSS
  ],
}

4. 优化CleanWebpackPlugin配置（可选） #

新版clean-webpack-plugin无需手动指定清理路径，默认会清理Webpack配置中output.path对应的目录，简化配置：

new CleanWebpackPlugin(), // 去掉原有的路径参数

内容的提问来源于stack exchange，提问作者Sai nath Reddy