React Antd4 CRA / Next.js / Vite 按需加载组件的 CSS / Less

!! 本文适用于 antd 4 !!
antd 5 已经重构为 css in js , 无需任何配置, 按需加载开箱即用.

在 CRA / Next.js / Vite 中配置 ant design 的按需加载 CSS / Less (支持热更新)

效果图

成功改为 黑色 和 紫色

Create React App (CRA) 的配置方法

"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "antd": "^4.23.6",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@types/customize-cra": "^1.0.3",
  "@types/node": "^16.11.66",
  "@types/react": "^18.0.21",
  "@types/react-dom": "^18.0.6",
  "babel-plugin-import": "^1.13.5",
  "customize-cra": "^1.0.0",
  "less": "^4.1.3",
  "less-loader": "^11.1.0",
  "react-app-rewired": "^2.2.1",
  "react-scripts": "5.0.1",
  "typescript": "^4.8.4"
},

根目录创建 config-overrides.js , 并写入以下内容

const {
  override,
  addWebpackAlias,
  addLessLoader,
  addBabelPlugin,
  adjustStyleLoaders
} = require("customize-cra");
const path = require("path");

module.exports = override(

  addWebpackAlias({
    "@": path.resolve(__dirname, "src")
  })
  ,
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        hack: `true;@import (reference) "${path.resolve(__dirname, './src/styles/variables.less')}";`,
      },
    }
  }),
  addBabelPlugin(["import", {
    "libraryName": "antd",
    "libraryDirectory": "es",
    "style": true
  }]),
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  }),

);

创建 src/styles/variables.less

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色

(可选) 添加 TypeScript 类型
react-app-env.d.ts 如下

/// <reference types="react-scripts" />
declare module '*.module.less' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

Next.js 的配置方法

"antd": "^4.21.0",
"next": "^12.1.0",

"less": "^4.1.2",
"less-loader": "^10.2.0",
"next-with-less": "^2.0.5", 
//让 Next.js 支持 less
// (官方只支持 sass, 而且官方以后也不会添加 less 的支持)

"next-transpile-modules": "^9.0.0",
// 处理一下 node_modules 中的 antd ,让 Next.js 可以引入 antd 的 css 文件

"babel-plugin-import": "^1.13.5",
// 配置 antd 按需导入  ( 上面的插件都是前置条件, 要不然就报错)
// 虽然 Next.js v12.1 加入了swc,  
// 但 swc 暂时还没有提供 `babel-plugin-import` 类似的功能,
// 以后有了就不需要本文的方法了, )

next.config.js

let plugins = require("next-compose-plugins");
let withLess = require("next-with-less");

const withTM = require("next-transpile-modules")(["antd", "@ant-design/icons"]);

let { resolve } = require('path')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // 这里都是默认的配置, 与本文无关
};

let config = [
  [
    withLess,
    {
      lessLoaderOptions: {
        lessOptions: {
          modifyVars: {
            hack: `true;@import (reference) "${resolve(__dirname, './styles/variables.less')}";`,
          },
        },
      },
      javascriptEnabled: true,
    }
  ],
  [withTM]
];

module.exports = plugins(config, nextConfig);

创建 styles/variables.less

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色

.babelrc

根目录 新建一个 .babelrc 文件

{
    //Next.js的总配置文件，相当于继承了它本身的所有配置
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            //增加新的插件，antd 按需引入
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": true 
                // true 是加载 LESS 相关的 "es/style/index.js"
                // 如果改为 "css", 则是 CSS 相关的 "es/style/css.js" 
            }
        ]
    ]
}

Vite 的配置方法

"vite-plugin-imp": "^2.3.0"
"less": "^4.1.3",

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import VitePluginImp from "vite-plugin-imp";
import { resolve } from "path";

export default defineConfig({
  resolve: {
    alias: [
      // fix less import by: @import ~
      // less import no support webpack alias '~' · Issue #2185 · vitejs/vite
      { find: /^~antd/, replacement: "antd" },
      // 自己用的 @ , 和本文无关
      { find: "@", replacement: resolve(__dirname, "./src") },
    ]
  },

  plugins: [
    react(),
    
    // css/less 按需导入  
    // https://github.com/onebay/vite-plugin-imp
    VitePluginImp({
      libList: [
        {
          libName: "antd",
          // style/index.js 是 less (index.js 名称可以省略), style/css.js 是 css
          // 这里使用 less
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    })],
  css: {
    // 开启 css 的 SourceMap
    devSourcemap: true,
    
    // 配置 Less
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 加载自己的 less 变量
        modifyVars: {
          hack: `true;@import (reference) "${resolve(__dirname, './src/styles/variables.less')}";`,
        },
      },
    },
  },

})

在根目录创建 src\styles\variables.less
随便改点 (支持热更新)

@primary-color: rgb(0, 0, 0); // 黑色
@menu-dark-item-active-bg : rgb(192, 3, 255); // 紫色