创建-react app SASS源代码映射不起作用

Question

SASS源地图无法在create 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，将得到以外的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

这个解决方案可能会被过度简化，但是在我的react应用程序中，我在与我的sass文件的源代码映射方面也出现了一些相同的错误。

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

因此，我将文件从App.sass重命名为App.scss，并开始工作。

出于某种原因，如果在reason应用程序的src文件夹中创建sass文件，它仍然会触发创建新的.css和css.map文件的响应。此时，似乎每件事情都在工作，但除非您重命名文件***.scss，而不是***.sass，否则它将无法工作。

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