【react】react支持less的两种方案（参考antd）

前言

create-react-app默认配置了sass，只需要安装依赖包即可，使用sass/scss文件；而antd框架样式使用less，所以拿来可以参开是怎么配置的。

npm install sass-loader sass --save-dev
or
yarn add sass-loader sass

一、第一种方式 （旧）

antd框架@3.x版本提出的方案：react-app-rewired + customize-cra

// 需要的依赖包
 yarn add react-app-rewired customize-cra
 yarn add babel-plugin-import
 yarn add less less-loader

1、修改配置

对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

/* package.json */
"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
}

2、项目根目录创建一个 config-overrides.js

用于修改默认配置，使用 babel-plugin-import：一个用于按需加载组件代码和样式的 babel 插件；
3、通过自定义antd主题让项目支持less

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,/默认'css',设置为true,即支持less
  }),
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A' },
 }),
);

4、组件使用方式

  // src/App.js
  import { Component } from 'react';
  import { Button } from 'antd';

二、第二种方式

最新的antd@4.19.4文档提出的craco方案

1、安装所需依赖包

yarn add @craco/craco
yarn add craco-less
yarn add babel-plugin-import

2、完整配置

const CracoLessPlugin = require("craco-less");
const { getThemeVariables } = require("antd/dist/theme");
module.exports = {
  babel: {
    //按需加载样式
    plugins: [
      [
        "import",
        {
          libraryName: "antd",
          libraryDirectory: "es",
          style: true, //设置为true即是less
        },
      ],
    ],
  },
  //自定义主题
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              ...getThemeVariables({
                dark: true, // 开启暗黑模式
                compact: true, // 开启紧凑模式
              }),
              "@primary-color": "#1DA57A",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};