Node Sass 8.0.0与^4.0.0版本不兼容问题的解决方法求助

核心原因 #

• Node Sass已被官方废弃，当前官方维护的是Dart Sass（npm包名为sass），你全局安装的sass和项目旧依赖不匹配
• 项目工具链（如react-scripts、webpack loader）版本过低，仅支持^4.0.0版本的Node Sass，而你安装的8.0.0版本超出兼容范围
• 即便装了Dart Sass，旧工具链仍会默认查找node-sass包，因此重复提示未安装

具体解决步骤 #

1. 彻底移除Node Sass相关依赖 #

先清除项目内的node-sass，避免版本冲突：

npm uninstall node-sass

使用yarn的话：

yarn remove node-sass

2. 安装官方推荐的Dart Sass #

安装项目本地的sass包（不要仅全局安装，全局包无法被项目识别）：

npm install sass --save-dev

或yarn命令：

yarn add sass --dev

3. 适配低版本工具链（针对react-scripts@4.x及以下版本） #

如果项目使用的是react-scripts@4.x及更早版本，默认的sass-loader仍依赖node-sass，需手动升级到支持Dart Sass的版本：

npm install sass-loader@10.x --save-dev

（10.x版本是兼容react-scripts@4.x且支持Dart Sass的稳定版本）

4. 清理缓存并重装依赖 #

删除node_modules、package-lock.json（或yarn.lock）后重新安装：

rm -rf node_modules package-lock.json
npm install

yarn用户执行：

rm -rf node_modules yarn.lock
yarn install

5. 自定义webpack配置适配（非脚手架默认配置的项目） #

如果项目用了自定义webpack配置，找到sass-loader的配置项，指定使用Dart Sass：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // 明确指定使用Dart Sass
            },
          },
        ],
      },
    ],
  },
};

验证方式 #

在项目中创建一个.scss文件，在组件内导入测试：

import './test.scss';

启动项目后若无报错，说明配置生效。

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