React 安装使用 Less（详细流程，包含 webpack、craco 方式）-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 安装使用 Less（详细流程，包含 webpack、craco 方式）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、简介

React 项目开发中可能会使用到 Less、Sass 等样式预处理器，create-react-app 创建的 React 项目，默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。

二、方式一：webpack.config.js 配置（不推荐）

由于需要暴露隐藏的配置文件，不利于项目升级，不推荐使用。

安装 less 与 less-loader

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

暴露 webpack 配置文件。（提示：该操作不可逆，长远考虑不推荐使用该方案）
```
$ npm run eject
```

修改 webpack.config.js 配置文件

首先要找到以下代码，可以使用 VSCode 查询功能直接找到，搜索内容为 sass:

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

仿照格式，在下面配置 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$/;

继续向下搜索 sass，能够找到以下代码:

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

和之前配置一样，仿照 sass 配置，添加 less 配置:

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

到这就完成了 webpack.config.js 配置 less，重启项目则可使用 less 样式了。

三、方式二：craco.config.js 配置（推荐）

安装 craco

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

安装 less 与 craco-less

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

修改 package.json 文件

"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"
}

补充：下载装饰器（可选，看情况使用）
```
$ npm i @babel/plugin-proposal-decorators -S
# 或
$ yarn add @babel/plugin-proposal-decorators -S
```

根目录创建，并配置 craco.config.js 文件文章来源地址https://www.toymoban.com/news/detail-706652.html

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 }]]
  }
}