Create project
The latest React version is 16.8.6
Create a project using the create react app scaffolding tool
Because you want to use AntD in your project
Expose profile
To configure less loader, you need to expose the webpack configuration file. This requires using the eject command provided by the create react app scaffold tool. Before running the command, you need to commit the project. Otherwise, the project cannot succeed in eject. Open the terminal and run the yarn eject command (or npm run eject). The eject command is a one-time command and cannot be recovered after running.
yarn eject
You can see that there is more config folder in the file.
Configure less
Next, install the less and less loader plug-ins and open the terminal input:
cd your-project yarn add less less-loader
Open the config folder, find the webpack.config.js file, and open it, mainly modifying three places:
1. Modify style files regexes, find the comment style files regexes, and add the following two lines of code at the end of this section:
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
2. Modify getStyleLoaders function and add code
{ loader: require.resolve('less-loader'), options: lessOptions, },
3. Add the following code, as shown in the figure below
{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using less // using the extension .module.scss or .module.less { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },
So far, the modification is completed and repackaged.