React installation and use Less (detailed process, including webpack and craco methods)

1. Introduction

• ReactStyle preprocessors such as Less, and , may be used in project development . The created projects support by default . If you need to use , additional manual installation and configuration is required.Sasscreate-react-appReactSassLess

2. Method 1: webpack.config.jsConfiguration (not recommended)

• Since it needs to expose hidden configuration files, it is not conducive to project upgrades and is not recommended.

• Install lesswithless-loader

  $ npm i less less-loader -S
  # 或
  $ yarn add less less-loader -S
  

• Expose webpackconfiguration files. (Tip: 该操作不可逆, this solution is not recommended for long-term considerations)

  $ npm run eject
  

• Modify webpack.config.jsconfiguration file

  First, you need to find the following code. You can use VSCodethe query function to find it directly. The search content is sass:

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  

  Following the format, configure it below less:

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  

  Continuing to search further sass, you can find the following code:

  ...
  {
        
        
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        
        
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
        
        
          mode: 'icss',
        },
      },
      'sass-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 SASS
  // using the extension .module.scss or .module.sass
  {
        
        
    test: sassModuleRegex,
    use: getStyleLoaders(
      {
        
        
        importLoaders: 3,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
        
        
          mode: 'local',
          getLocalIdent: getCSSModuleLocalIdent,
        },
      },
      'sass-loader'
    ),
  },
  ...
  

  As with the previous configuration, follow sassthe configuration and add lessthe configuration:

  ...
  // config 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'
    ),
  },
  ...
  

• This completes webpack.config.jsthe configuration less. You can use lessthe style after restarting the project.

3. Method 2: craco.config.jsConfiguration (recommended)

• Installcraco

  $ npm i @craco/craco
  # 或
  $ yarn add @craco/craco
  

• Install lesswithcraco-less

  $ npm i less craco-less
  # 或
  $ yarn add less craco-less
  

• Modify package.jsonfile

  "scripts": {
        
        
      // "start": "react-scripts start",
      // "build": "react-scripts build",
      // "test": "react-scripts test",
      "start": "craco start",
      "build": "craco build",
      "test": "craco test",
      "eject": "react-scripts eject"
  }
  

• Supplement: download decorator (optional, use according to the situation)

  $ npm i @babel/plugin-proposal-decorators -S
  # 或
  $ yarn add @babel/plugin-proposal-decorators -S
  

• Create root directory and configure craco.config.jsfiles

  const path = require('path')
  const lessPlugin = require("craco-less");
  
  module.exports = {
        
        
    // 插件
    plugins: [
      {
        
        
        plugin: lessPlugin,
        options: {
        
        
          lessLoaderOptions: {
        
        
            lessOptions: {
        
        
              // antdv 主题之类的配置
              // modifyVars: { "@primary-color": "#1DA57A" },
              javascriptEnabled: true
            }
          }
        }
      }
    ],
    // 如果没安装，可以删除
    babel: {
        
        
      plugins: [["@babel/plugin-proposal-decorators", {
        
         legacy: true }]]
    }
  }