大家.
我是反应的新成员,我使用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并对其进行相同的更改:文件加载器排除和与样式相关的加载器链.