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

Posted 2023-02-22

【中文标题】Node-SASS 源映射不适用于 React-JS

【英文标题】：Node-SASS source maps not working with React-JS

【发布时间】：2019-03-28 20:43:18

【问题描述】：

我正在尝试将 SASS 与 REACT 一起使用

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

我面临的问题是源地图不起作用。

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

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

【问题讨论】：

这与 react-create-app 相同，所以我不认为您在设置中做错了什么

无法弄清楚为什么它不起作用

【参考方案1】：

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

试试这个：

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

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

以下确实对我有用：

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

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