安装 SASS React 的问题答案

【问题标题】：Problems with installing SASS React安装 SASS React 的问题
【发布时间】：2025-11-22 21:10:03
【问题描述】：

我想将 SASS 安装到我的 react 应用程序中。我试试yarn add node-sass我的控制台返回错误：

./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)

Node Sass version 7.0.1 is incompatible with ^4.0.0.

我找到了卸载 node-sass 并安装 sass 的建议。我做到了，但后来我得到了这个错误：

../src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss) To import Sass files, you first need to install node-sass. Run npm install node-sass or yarn add node-sass inside your workspace. Require stack:

/Users/madlen/(...)/node_modules/sass-loader/lib/loader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/loadLoader.js
/Users/madlen/(...)/node_modules/loader-runner/lib/LoaderRunner.js
/Users/(...)/node_modules/webpack/lib/NormalModule.js
/Users/(...)/node_modules/webpack/lib/NormalModuleFactory.js
/Users/(...)/node_modules/webpack/lib/Compiler.js
/Users/(...)/node_modules/webpack/lib/webpack.js
/Users/(...)/node_modules/react-scripts/scripts/start.js

我尝试升级yarn，添加sass-loader，没有任何帮助

【问题讨论】：

标签： reactjs sass

【解决方案1】：

在你的包 json 中执行此操作

"node-sass": "npm:sass@^1.49.9",

React 在删除 node-sass 并替换为 sass 后仍然要求它，因此您可以像这样为它起别名，现在 react 将使用 sass

【讨论】：

【解决方案2】：

尝试停止当前的开发服务器，然后重新安装 node-sass。

【讨论】：

当我这样做时，我又得到了这个错误：./src/comopnents/Form/Form.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./src/comopnents/Form/Form.scss)Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.

【解决方案3】：

我遇到了类似的问题。这些步骤解决了我的问题。

删除节点模块rm -rf node_modules
删除 package-lock.json rm package-lock.json
运行npm install 或yarn install

我正在使用；

节点萨斯：^6.0.1
npm: 7.24.2
节点：v16.13.0

【讨论】：

【解决方案4】：

也许可以尝试更新您项目的 react-scripts，因为这样做可以解决我的问题。

我遇到了同样的问题 - 在其他地方看到了将 node-sass 切换为 sass 的建议，然后出现了 OP 中提到的相同错误。尝试了 Mark O 对别名 sass 的解决方案，该解决方案奏效了。然而，然后我尝试在我的项目中设置绝对导入（jsconfig.json 以described here 的方式），这也神秘地失败了。

然后我意识到我的项目由于某种原因有一个非常旧的react-scripts 版本，就像它在 2.x.x 上一样。因此，我将package.json 中的react-scripts 换成了"react-scripts": "4.0.3", 运行npm install，npm run start，现在绝对导入工作。然后我再次尝试使用sass 而不是node-sass，这也有效（npm uninstall node-sass，然后是npm install sass）。

【讨论】：