reactjs – 如何在create-react-app中启用源映射？

2023年7月2日 308次阅读

大家.

我是反应的新成员,我使用create-reat-app创建了我的应用程序.我使用了像react’s document这样的node-sass-chokidar包.但我不知道如何启用scss文件的“源映射”.

谢谢你的帮助.

最佳答案 有几种方法可以使用create-react-app实现源映射,但据我所知 – 无论如何,你需要编辑webpack的配置.

npm cli命令(启动,构建,弹出)的配置和脚本存储在名为“react-scripts”的包中.有两种方法可以访问它们：

选项A)通过运行$yarn eject弹出项目.这会将所有相关的依赖项解包到项目package.json中,也可以从名为config和scripts的react-scripts包中解压缩到项目的根目录中.

选项B)制作自己的自定义react-scripts包(或使用某人).在这种情况下,您不必从项目中弹出,您的项目将是干净的.这样您就可以用自己的默认’react-scripts’替换它们.

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

如果你愿意的话,试试我的 – rulsky-react-scripts – 它带有sass处理(启用了源映射)和browsersync.

无论哪种方式,您都必须将node-sass和sass-loader添加到依赖图中(但在不同的地方).

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

1)纱线弹出

2)yarn添加node-sass sass-loader

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

4)在module.rules中为样式文件的文件加载器编辑excudions
““

-  /\.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并对其进行相同的更改：文件加载器排除和与样式相关的加载器链.

点赞