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

Posted 2023-03-07

【中文标题】要导入 Sass 文件，首先需要安装 node-sass

【英文标题】：To import Sass files, you first need to install node-sass

【发布时间】：2020-03-05 06:21:06

【问题描述】：

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

。在工作区中运行 npm install node-sass 或 yarn add node-sass。

我确实安装了 node-sass。

package.json:

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

项目节点模块文件夹：

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

【问题讨论】：

它应该在依赖项上，而不是在我认为的 devDependencies 上

@ocheriaf - 我有其他项目以这种方式设置并且可以正常工作

运行构建时是否从 package.json 调用 node-sass？例如："build": "node-sass --other build steps"

我正在分叉 create-react-app，并且正在运行 npx create-react-app --scripts-version file:../my-local/react-scripts。然后我会在创建的应用程序中收到此错误。然后我将反应脚本发布到 npm 并以这种方式运行，不再出现此错误。不明白

这里有同样的问题。您是否有机会使用 Yarn 工作区？

【参考方案1】：

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

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

environment:
  - SASS_PATH=node_modules:src

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

【参考方案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，请先阅读

---

【参考方案3】：

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

【参考方案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。

【参考方案5】：

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

npm uninstall -g node-sass

npm install node-sass

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

【讨论】：

make sure to stop npm start until after installation - 我唯一要做的事。

【参考方案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

这解决了我的问题！

【参考方案7】：

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

【讨论】：

create-react-app 是否需要更新他们的文档create-react-app.dev/docs/adding-a-sass-stylesheet