Create-react-app SASS 源映射不起作用

Question

SASS source map 無法在create-react-app 2上輸出（報告的錯誤），在考慮官方修復時一直試圖找到解決方法。

另一位用戶建議將以下內容添加到腳本中：

"scripts": {
    "build-css": "node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css",
    "watch-css": "npm run build-css && node-sass --source-map true --include-path ./src --include-path ./node_modules src/assets/sass -o public/css --watch --recursive"

這可以解決問題，但會生成另一個 CSS，該 CSS 會在 webpack 之外被拾取，也破壞了 CSS 注入（熱加載）。

這就是 CSS 的包含方式（通過index.js文件中的import ）。 理想情況下，這應該保持原樣。

import "styles/main.scss";

在 package.json ( react-scripts v2.1.1 ) 下面：

"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "lint": "NODE_ENV=production eslint src --ext '.js,.jsx'",
        "lint-fix": "yarn lint --fix",
        "lint-check": "NODE_ENV=production eslint --print-config . | eslint-config-prettier-check",
        "prepare-mobile": "node prepare-mobile.js",
        "release-mobile": "node prepare-mobile-release.js",
        "postbuild": "yarn prepare-mobile",
        "precommit": "pretty-quick --staged"
    }

除了上述方法之外，還有什么方法可以輸出 SASS 源映射而不必彈出 webpack？

Answer 1

這個解決方案可能暫時被過度簡化了，但是在我的 react 應用程序中使用我的 sass 文件進行源映射時，我遇到了一些相同的錯誤。

我的 sass 文件上的文本仍然是白色的，並且在我添加內容時不會更新 css 文件。

因此，我將文件從App.sass重命名為App.scss ，它開始工作。

出於某種原因，如果您在 React 應用程序的 src 文件夾中創建一個 sass 文件，它仍然會觸發創建一個新的 .css 和 css.map 文件的響應。 在這一點上，看起來一切都正常，但除非您將文件重命名為 ***.scss 而不是 ***.sass，否則它將無法正常工作。

我猜這不會解決大多數人的源映射問題，但如果他們有一個簡單的問題，它可能會為他們節省一些麻煩。