React 16.8 change Webpack support Less file

Keywords: Javascript less Webpack React npm

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.

Posted by statrat on Fri, 18 Oct 2019 11:19:20 -0700