如何在create-react-app中启用源地图？

Question

大家。

我是react的新成员，我创建了我的应用程序create-reat-app。我使用了react的document之node-sass-chokidar类的包。但是我不知道如何启用scss文件的“源映射”。

谢谢你的帮助。

Answer 1

有多种方法可以使用 create-react-app 实现源映射，但据我所知 - 无论如何，您需要编辑 webpack 的配置。npm cli 命令（启动、构建、弹出）的配置和脚本存储在名为“react-scripts”的包中。有两种方法可以访问它们：

选项 A ) 通过运行来弹出您的项目$ yarn eject。这会将所有相关依赖项解包到您的项目 package.json 中，并将名为 config 的 React-scripts 包中的目录和脚本解包到项目的根目录中。

选项 B）制作您自己的自定义反应脚本包（或使用某人的）。在这种情况下，您不必从项目中弹出，并且您的项目将是干净的。这样你就可以用你自己的替换默认的“react-scripts”。

yarn remove react-scripts
yarn add <your-custom-react-scripts>

如果你愿意的话，试试我的 - rulsky-react-scripts - 它带有 sass 处理（启用了源映射）和 browsersync。

无论哪种方式，您都必须将 node-sass 和 sass-loader 添加到依赖关系图中（但在不同的位置）。

接下来的步骤我将重点介绍如何通过弹出项目来添加sorceMap并假设您有纱线（因为使用 CRA 最好使用纱线）。所有路径都相对于项目的根目录

1）yarn eject

2）yarn add node-sass sass-loader

3）打开config/webpack.config.dev.js

4) 在 module.rules 中编辑样式文件的文件加载器的排除````

-  /\.css$/,
+  /\.(css|scss|sass)$/,

````

5) 在“与样式相关的加载器链”中展开“测试”属性：````

-  test: /\.css$/,
+  test: /\.(css|scss|sass)$/,

````

6) 添加到 'css-loader' 属性的选项sourceMap: true,。它应该看起来像这样：````

{
 loader: require.resolve('css-loader'),
  options: {
   importLoaders: 1,
   sourceMap: true,
  },
},

````

7) 在 'css-loader' 之后添加 'sass-loader' 以及适当的选项：````

{
 loader: require.resolve('sass-loader'),
  options: {
   sourceMap: true,
  }
},

````

8) 现在我们需要编辑webpack 的生产配置。

9) 打开config/webpack.config.prod.js并对其进行相同的更改：文件加载器排除和与样式相关的加载器链。