如何在我的 React 项目中使用 Sass 解决这个问题？

Question

所以我已经连续两天尝试（没有成功）在我的项目中使用 sass 的所有可能方式。 我为 sass 使用 7-1 架构，为 javascript 使用基本的组件布局页面架构。

问题是我不断收到此错误：

Failed to compile ./src/sass/main.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/sass/main.scss) Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93) For more information on which environments are supported please see: https://github.com/sass/node-sass/releases/tag/v5.0.0 This error occurred during the build time and cannot be dismissed.

据我了解，几乎所有 sass 编译器都已弃用，我发现 Dart sass 可能是最好的编译器，所以我一直在安装它并设置脚本，但是即使大多数编译器确实编译了代码就好了，我的应用程序无法加载...

我不知道该怎么办，也无法绕过它。 所以我在这里乞求你的帮助。

顺便说一句，我阅读了几乎所有与 sass dart sass 节点相关的问题并在此处做出反应，并没有找到我的答案。 如果您需要有关代码的更多详细信息，请告诉我。

Answer 1

通过以这种方式安装 sass loader 解决yarn add -D sass-loader sass webpack和匹配的 webpack 版本。

这是实际的 package.Json 文件：

    {
  "name": "cyzbot-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "postcss-cli": "^9.1.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "sass": "dart compile-sass.dart ./src/main.scss ./src/main.css",
    "prefix": "postcss ./src/main.css --use autoprefixer -d ./public/css/prefixed/",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "sass": "^1.52.2",
    "sass-loader": "^13.0.0",
    "webpack": "^5.73.0"
  }
}

编辑：它又发生了，感谢上帝，我在修复后发布了包裹......

所以我才发现问题来自我 triyong 做一个“npm audit fix”和/或“npm audit fix --force”，当我试图重新启动服务器时它输出了代码：

    react-scripts start

There might be a problem with the project dependency tree.        
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a 
dependency:

  "webpack": "4.28.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in 
the tree:

  C:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack (version: 5.73.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in 
the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try: 

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if C:\Users\Work\Documents\Code\CyzBot-React\node_modules\webpack is outside your project directory.
     For example, you might have accidentally installed something 
in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above 
:-) We hope you find them helpful!

似乎它尝试切换回旧版本的 react 脚本（出于安全问题），但就像 2.1.3 一样？

这看起来像是来自 webpack 的错误，而实际上只是看起来与该版本的 react-script 一起工作的唯一版本的 webpack 是：“webpack”：“4.28.3”。

因此，如果您只是删除 node_modules 中的包，请将 react-script 版本修改为您使用的版本（d），然后执行yarn install或npm install然后再次启动本地服务器，它现在应该可以恢复了。

至少它对我有用。