javascript - Node-SASS 源映射不适用于 React-JS

Question

我正在尝试将 SASS 与 REACT 结合使用

虚拟 GITHUB:https://github.com/bansalvks/react-poc-collection/tree/master/scss-with-react

我面临的问题是源 map 无法正常工作。

我正在使用 node-sass-chokidar并使用以下脚本运行该实用程序node-sass-chokidar --include-path ./node_modules/./src -o ./src --output-style=expanded --source-map=true --source-map-root=true --观看

正如您在下面的屏幕截图中看到的，文件没有出现

Answer 1

这适用于 create-react-app 但您可以在您的 React 设置中尝试

试试这个:

从“Dummy”Github 网页我发现了这个:

https://github.com/facebook/create-react-app/issues/5707

The following did work for me:

1.) open node_modules\react-scripts\config\webpack.config.js
2.) replace "isEnvProduction" with "isEnvDevelopment" for the css-loader, css-module loader, sass loader and sass module loader
(between lines 443 - 500)
3.) start development process with "npm start"

很简单，导航到 node_modules\react-scripts\config\webpack.config.js

在第 443-500 行之间搜索:

• css 加载器
• css 模块
• 装载机
• sass 加载器
• sass 模块加载器

并将 isEnvProduction 替换为 isEnvDevelopment

https://user-images.githubusercontent.com/11925409/50423483-4b986900-0856-11e9-80bb-7f7f331e17fd.png

我已经尝试过了，现在 source maps 可以在 chrome 开发者工具中使用了