preface

The official create-react-app creates projects that do not support less by default, but are not used to writing other preprocessing languages

methods

The first step

// Install less and less-loader yarn add less less-loader --save-devCopy the code

The second step

// The default configuration is displayed. By default, the project created by create-react-app is yarn eject without webpack.config.jsCopy the code

The third step

// In webpack.config.js, const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' ), }Copy the code

Pay attention to

TypeError: this.getOptions is not a function error

The version of less-Loader is too high. Use 7.3.0. For related causes, see less-loder Issues

Webpack is not familiar, if there is a mistake, welcome to leave a message guidance!