如何在我的 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然后再次啟動本地服務器，它現在應該可以恢復了。

至少它對我有用。