React项目中使用less

目录导航

前言
一、配置（不推荐）
- - 1.安装less和less-loader
  - 2.暴露webpack配置文件
  - 3.修改配置文件
二、配置（推荐）
- - - 1.安装craco
    - 2.安装less和craco-less
    - 3.修改文件
    - 4.下载装饰器
    - 5.配置文件
总结

前言

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

一、配置（不推荐）

第一种方式就是在中进行配置，这样进行配置需要暴露出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文件夹，在里面可以找到文件

3.修改配置文件

首先要找到以下代码，我的配置文件里显示为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 /webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension . or .
            {
              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'
              ),
            },

这样就完成了配置less，可以在项目中使用less样式了

二、配置（推荐）

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.修改文件

修改前

"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.配置文件

在项目的同级目录下创建一个文件文件

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，这是最优的选择

秒客网