React项目中使用less

---

前言

平时我们在进行React项目开发的时候，可能会使用到Less或者Sass进行样式开发，React项目当中只集成了Sass，因此对于习惯书写Less的小伙伴十分不友好，所以我们需要知道如何在React项目中配置Less

---

一、webpack.config.js配置（不推荐）

第一种方式就是在webpack.config.js中进行配置，这样进行配置需要暴露出React的config配置文件，不利于项目的升级

1.安装less和less-loader

yarn add less less-loader -S
or
npm i less less-loader -S

2.暴露webpack配置文件

警告：该操作不可逆

npm run eject

完成命令之后，项目根目录会出现一个config文件夹，在里面可以找到webpack.config.js文件

3.修改webpack.config.js配置文件

首先要找到以下代码，我的配置文件里显示为70行-73行，可以使用Vscode的查询功能直接找到，Ctrl+F，搜索内容为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配置（推荐）

1.安装craco

yarn add @craco/craco
or
npm i @craco/craco

2.安装less和craco-less

yarn add less craco-less
or
npm i less craco-less

3.修改package.json文件

修改前

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

修改后

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

4.下载装饰器

yarn add @babel/plugin-proposal-decorators -S
or
npm u @babel/plugin-proposal-decorators -S

5.配置croca.config.js文件

在项目package.json的同级目录下创建一个文件craco.config.js文件

const CracoLessPlugin = require("craco-less");

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { "@primary-color": "#1DA57A" },
                        javascriptEnabled: true
                    }
                }
            }
        }
    ],
    babel: {
        plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
    }
};

---

总结

在Reack项目中使用less的方式有以上两种，推荐大家使用craro进行配置less，这样可以在不暴露config文件夹的情况下配置less，这是最优的选择