编译报错TypeError: this.getOptions is not a function，版本兼容仍出问题求助

我已经查过这个问题的其他解决方案，大多围绕版本不兼容展开，但我当前的依赖版本看起来是兼容的，情况似乎更复杂。以下是我的package.json中相关配置：

"engines": {
    "node": "14.17.4",
    "npm": "6.14.14"
},

"dependencies": {
    ...
    "node-sass": "^4.11.0",
},

"devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.8.1",
    "prettier": "^2.2.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.74.0"
  },

完整报错信息：

TypeError: this.getOptions is not a function

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! web-frontend@0.1.0 build: `node --inspect scripts/build.js`
npm ERR! Exit status 1

核心问题定位 #

this.getOptions is not a function 本质是loader版本与webpack、sass编译工具的适配冲突：

• sass-loader从v10开始依赖webpack 5.x提供的getOptions方法，但你同时安装了已废弃的node-sass@4.11.0和官方推荐的sass@1.62.1，webpack编译时可能优先调用了旧版node-sass的适配逻辑，导致方法缺失。
• node-sass@4.x早已停止维护，与高版本sass-loader的兼容性存在隐性隐患。

具体解决步骤 #

1. 移除node-sass，统一使用sass
   node-sass已被官方废弃，dart-sass（即npm包sass）是替代方案，执行命令清理冲突依赖：

   npm uninstall node-sass
   

   你的devDependencies中已存在sass@1.62.1，无需重复安装。

2. 调整sass-loader版本适配node14环境
   sass-loader@13.x对node14的兼容性不如12.x稳定，降级到适配版本：

   npm uninstall sass-loader
   npm install sass-loader@12.6.0 --save-dev
   

3. 明确webpack配置中sass-loader的实现
   在webpack配置文件中指定使用sass作为编译实现，避免自动选择冲突：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.s[ac]ss$/i,
           use: [
             "style-loader",
             "css-loader",
             {
               loader: "sass-loader",
               options: {
                 implementation: require("sass")
               }
             }
           ]
         }
       ]
     }
   };
   

4. 清理缓存并重新构建

   rm -rf node_modules package-lock.json
   npm install
   npm run build
   

额外注意点 #

• node14.x虽在维护周期，但后续建议升级到node16+，能更好适配最新的webpack和loader生态。
• 永远不要同时安装node-sass和sass，二者会触发编译逻辑冲突。

内容的提问来源于stack exchange，提问作者Taco