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

【问题标题】：Create-react-app SASS source maps not workingCreate-react-app SASS 源映射不起作用
【发布时间】：2019-04-26 06:28:42
【问题描述】：

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 的方式（通过 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？

【问题讨论】：

在github.com/facebook/create-react-app/issues/5707 中了解agairing 对Firefox 的临时修复。您还可以在此处查看代码更改：github.com/facebook/create-react-app/pull/6472/commits/…。我可以确认这对我有用。希望对您有所帮助！
这是一个真正的答案：github.com/facebook/create-react-app/issues/…

标签： reactjs webpack create-react-app package.json

【解决方案1】：

这个解决方案可能暂时被过度简化了，但在我的 react 应用程序中使用我的 sass 文件进行源映射时，我遇到了一些相同的错误。

我的 sass 文件上的文本仍然是白色的，并且在我添加内容时不会更新 css 文件。

所以，我将文件从 App.sass 重命名为 App.scss，然后它就开始工作了。

由于某种原因，如果您在 React 应用的 src 文件夹中创建 sass 文件，它仍然会触发创建新 .css 和 css.map 文件的响应。在这一点上，看起来一切都正常，但除非您将文件重命名为 ***.scss 而不是 ***.sass，否则它将无法正常工作。

我猜这不会解决大多数人的源映射问题，但如果他们有一个简单的问题，它可能会为他们省去一些麻烦。

【讨论】：