Perfect solution for using less in react configuration

Optimal solution for using less in react configuration

react supports scss by default, but does not support less. An error will be reported when using less directly. Therefore, additional configuration is required when using less. As for the technical selection, the choice of less or scss is entirely determined by your personal preferences. Of course you can take other ways to implement less configuration. But I only provide one way to solve problems, mainly for recording and easy viewing for myself in the future.

Install

npm install less less-loader --save-dev
//
yarn add less less-loader --dev

Configure webpack

Since create-react-app uses webpack as its module packer, you need to modify the configuration of webpack to support .less files. To do this, you can use react-app-rewired and customize-cra.

First, install these three dependencies:

npm install npm install react-app-rewired customize-cra babel-plugin-import --save-dev
//
yarn add npm install react-app-rewired customize-cra babel-plugin-import

Modify the files in your project and replace the start and build commands in scripts with the one that uses react-app-rewired. For example:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

- Create a new configuration file in the root directory In the project root directory, and add the following to override the default webpack configuration to support Less:

is a file that overwrites the default configuration of create-react-app. It allows developers to modify webpack configuration without forcing eject. By using, developers can add custom webpack configurations, such as adding new loaders or plugins.

const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 = override(
  fixBabelImports('import', {
    libraryName: 'antd', // If you use antd or other libraries in your project that require loading styles on demand, please modify this accordingly.    libraryDirectory: 'es', // The default value is 'lib'. If you are using the es module version of antd, please modify it here.  }),
  addLessLoader({ lessOptions: { javascriptEnabled: true } }) // Enable JavaScript support in Less (if needed).);

Use Less in Components:

Now you can use the .less file in your component. For example, you could create a file named , and import it like this in your React component:

import './'; // Import yours using relative paths .less document。

Report an error

During the configuration process, the following error message may appear

Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property ‘plugins’. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }

Don't ask, I don't know why, try the following method

Reduce less-loader version to 5.0.0

yarn remove less-loader
yarn add [email protected]

2. Modify the configuration (this is how I solved it)

customize-cra-less-loader

const { override } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");
 = override(
  addLessLoader({
    lessLoaderOptions: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#038fde',
        }
      }
    }
  })
);

This is the end of this article about the optimal solution for using less in react configuration. For more related content on using less in react configuration, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!