要导入 Sass 文件，首先需要安装 node-sass

Question

运行 create-react-app，我在我的 create-react-app 应用程序中收到错误：

要导入 Sass 文件，首先需要安装 node-sass。在工作区中运行 npm install node-sass 或 yarn add node-sass。

我确实安装了 node-sass。

package.json:

  "devDependencies": {
    "node-sass": "^4.13.0"
  }

项目节点模块文件夹：

我已经卸载、重新安装、更新、清理缓存等。我该如何修复？

Answer 1

我遇到了同样的问题，设置 SASS_PATH 环境变量为我解决了这个问题。

例如，如果您使用docker-compose.yml，则添加：

environment:
  - SASS_PATH=node_modules:src

也许其他人可以解释为什么需要这样做。

Answer 2

下面是我的错误，

./src/modules/TestListing/components/SurveyCard/index.scss 

/usr/local/lib/node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!

/usr/local/lib/node_modules/react-scripts/node_modules/postcss-loader/src??postcss!

/usr/local/lib/node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!

/usr/local/lib/node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!

./src/modules/TestListing/components/SurveyCard/index.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.

即使我已在全局范围内安装了node-sass，但还是发生了错误，这很奇怪。

我认为react-scripts 在它的环境中无法识别node-sass，因此我在全局安装的react-scripts 包中添加了node-sass 依赖项

cd /usr/local/bin/node_modules/react-scripts
sudo npm install --unsafe-perm node-sass

在上面的命令中，我实际上是在将 node-sass 安装到一个 react-script 包中，它是一个库，它可以解决我的问题，

注意命令，因为我是dong--unsafe-perm，请先阅读

---

Answer 3

实际上对我有用的是创建一个新文件夹，从那里创建一个反应应用程序并将所有代码传输到该新文件夹。不知道为什么首先会出现问题。

Answer 4

一般情况下应该安装node-sass:

npm install node-sass --save
# or
yarn add node-sass

如何导入

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import '~nprogress/nprogress'; // importing a css file from the nprogress node module

Sass 路径变量

要使用相对于您指定的路径的导入，并且从node_modules 导入而不添加~ 前缀，您可以在项目根目录中添加.env file 和变量SASS_PATH=node_modules:src。要指定更多目录，您可以将它们添加到SASS_PATH，并用: 分隔，例如path1:path2:path3。

Answer 5

对我有用的是我卸载了全局 node-sass 并将其安装在我当前的项目目录中

npm uninstall -g node-sass

npm install node-sass

确保在安装完成之前停止 npm start，如果可能，在安装完成后重新启动系统

Answer 6

在我的情况下，即使 node-sass 已经安装在我的项目目录中，我也遇到了同样的问题。

要导入 Sass 文件，首先需要安装 node-sass。运行 npm
在你的工作空间中安装 node-sass 或 yarn add node-sass。

我发现，我的项目在全局安装的 react 脚本上运行，并且在我的本地项目目录中还有另一个版本。获取“node-sass”的基本路径时发生冲突。

我卸载了本地的 react-scripts 并在本地项目目录中重新安装了它。运行，

npm uninstall react-scripts 然后
npm install react-scripts

这解决了我的问题！

Answer 7

node-sass 已被弃用。请安装 sass 或 dart sass 来解决您的问题。