我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章，点击查看活动详情

1. 什么是自定义`antd`样式前缀

我们都知道antd的样式是以ant-xxx组成的，这里的样式前缀，指的就是ant，我们可以在antd官方文档全局化配置配置一节中，搜索prefixCls属性，最终找到

参数	说明	类型	默认值
prefixCls	设置统一样式前缀。注意：需要配合 `less` 变量 @ant-prefix 使用	string	`ant`

这就是所谓的自定义的antd样式前缀。

2. 为什么要自定义`antd`样式前缀

那么ant默认前缀使用的好端端的，我们为什么要自定义antd样式前缀呢？

在我司开发中，我们使用qiankun微前端架构系统。我们外表看起来的一个系统是由多个前端小项目组成的，如果我们都使用antd默认的ant前缀，就会出现样式冲突的问题，在多方调研之后，发现修改antd的样式前缀是最简单的解决方案。

3. 实现方案

那么如何快速实现自定义antd样式前缀呢？我们查阅qiankun官网，发现其给出了解决方法，根据其介绍，我们一共需要配置两个地方：

1. 配置 webpack 修改 less 变量

//webpack.config.js

{
  loader: 'less-loader',
  options: {
      modifyVars: {
      '@ant-prefix': 'jiang-niao',
      },
      javascriptEnabled: true,
  },
}

   如果自定义过`antd`主题包，是否会感觉很熟悉呢？

2. 配置 antd ConfigProvider

// src/App.tsx

import { ConfigProvider } from 'antd';

export const MyApp = () => (
  <ConfigProvider prefixCls="jiang-niao">
    <App />
  </ConfigProvider>
);

qiankun文档中，直接给我们提供了使用原生webpack的解决方案。在对我司项目进行改造时(项目初始化使用cra、craco)，参考qiankun及其关联的antd文档，以及一些查询，结合我们的使用场景，整理了cra和craco的解决方案

`cra`解决方案

在create-react-app中，我们使用addLessLoader，操纵less的modifyVars。

// config-overrides.js

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

module.exports = {
  webpack: override(
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          '@ant-prefix': 'jiang-niao',
        },
      },
    }),};

`craco`解决方案

在craco中，我们使用CracoLessPlugin，操纵less的modifyVars。

// craco.config.js

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

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@ant-prefix': 'jiang-niao' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};