How to enable source maps in create-react-app?
all.
I am a new contributor to react and I created an app to use create-reat-app
. I used a node-sass-chokidar
package like edit a document . But I don't know how to include the "source maps" of the scss file.
Thanks for any help.
source to share
there are several ways to achieve source mapping using create-react-app, but as far as I know you need to edit your webpack config anyway. Configurations and scripts for the npm cli commands (start, build, eject) are stored in a package called "scripts". They can be accessed in two ways:
option A ) unload the project by running $ yarn eject
. This will unbind all related dependencies in your project package.json as well as the dir from the react scripts package named config and scripts to the root of your project.
option B ) Create your own client script (or use it). In this case, you do not need to be thrown out of the project and your project will be clean. This way you can replace the standard "reaction scripts" with your own.
yarn remove react-scripts
yarn add <your-custom-react-scripts>
try the rulik-reaction scripts if you like - it comes with sass handling (with source maps included) and browsers.
Either way, you need to add node-sass and sass-loader to your dependency graph (but in different places).
Next Steps I'll walk you through how to add a sorceMap by unloading the project and assuming you have yarn (because yarn is better with CRA). All paths refer to the root of your project
1) yarn eject
2) yarn add node-sass sass-loader
3) open config / webpack.config.dev.js
4) in module.rules edit predictions for the style file loader `` ''
- /\.css$/,
+ /\.(css|scss|sass)$/,
,,,,
5) in the "style-related chain of loaders" expand the "test" property: `` ``
- test: /\.css$/,
+ test: /\.(css|scss|sass)$/,
,,,,
6) add 'css-loader' properties to the properties sourceMap: true,
. It should look like this: `` ''
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
sourceMap: true,
},
},
,,,,
7) immediately after 'css-loader' adds 'sass-loader' with appropriate parameters: `` ''
{
loader: require.resolve('sass-loader'),
options: {
sourceMap: true,
}
},
,,,,
8) Now we need to change the production configuration of the webpack.
9) open config / webpack.config.prod.js and make the same changes to it: file loader exceptions and style-related loader chain.
source to share