React project import less stylesheet does not work. Create-react-app can’t support less after installing the react project. Webpack configurecss /less loader by default. The Loader configuration for Webpack needs to be changed.

1. Install the webPack package (the latest version of the package is not recommended)

2. Expose dependencies (Webpack, Babel, etc.) and runnpm run eject

After running, there are two more files, config and scripts, as shown below

Note: Before running NPM run eject, you must commit all of the project changes, otherwise it will fail. Second, this command is a one-way operation, and once executed, it is irreversible

3. Modify webpack.config.js to make less available

At the top of the add

const lessRegex = /\.less$/;
const lessModuleRegex = /\.less$/;
Copy the code

Find test: cssRegex and add the following code in front of it

{
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1.sourceMap: isEnvProduction && shouldUseSourceMap,
       },
       'less-loader'
   ),
   sideEffects: true}, {test: lessModuleRegex,
   use: getStyleLoaders(
       {
         importLoaders: 1.sourceMap: isEnvProduction && shouldUseSourceMap,
         modules: true.getLocalIdent: getCSSModuleLocalIdent,
       },
       'less-loader'),},Copy the code

4. Install less and less-loader

TypeError: this.getOptions is not a function Because the less-loader version is too high

5. An error was reported when running.options has an unknown property 'getLocalIdent'

Options passed an invalid parameter getLocalIdent, which is an argument to modules

Change it to the following figure

6. Restart, find less style is still not effective, search, only to find that you need to use variables

7. After modification, restart, and finally run successfully. It’s not easy…