创建反应应用程序SASS源地图不起作用

Question

SASS源映射无法在 create-react-app 2 （reported bug）上输出，试图在考虑正式修复的同时寻求解决方法。

另一个用户建议将以下内容添加到脚本中：

"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的方式（通过import文件上的index.js）。理想情况下，应保持原样。

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

更新2/20/2019：：generates a new bug下面原始答案中提到的2.1.4修复程序，您可能要在升级之前检查一下。

因此，2.1.4修复很可能会还原。

如果您想避免新错误，请停留在2.1.3或更低的级别。

---

原始答案：

好消息！该问题已在CRA v2.1.4上修复。不过，只能在Chrome上运行。 Firefox still suffering blob bug since v59和Safari也无法使用。

要解决此问题，请将package.json上的create react应用程序版本更新为最新的2.1.5或^2.1.4并运行npm install

"devDependencies": {
        "react-scripts": "2.1.5",
    }

参考号＃5713：

Chrome（正常运行）：

Firefox（已调试）：