antd更换主题和按需引入

最新推荐文章于 2025-10-23 01:26:33 发布

原创最新推荐文章于 2025-10-23 01:26:33 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #前端

本文详细介绍了如何在React项目中配置Ant Design，包括安装、按需引入和自定义主题。通过修改less变量实现全局颜色变更，并使用`customize-cra`进行配置调整，确保样式加载和组件按需加载。

antd更换主题和按需引入

1、项目搭建
2、项目初始化
3、安装antd

一、准备工作

这里就写上一步到位的配置吧，不用弯弯绕绕了，有需求的小伙伴直接安装配置就行。
我们在配置的时候，肯定不可能只是定义全局主色这么简单，还可能需要配置其他的颜色、字号、圆角大小等，可以参考选下面的通用变量，所有的样式变量点击这里可以查看。

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
@disabled-color : rgba(0, 0, 0, .25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

二、安装插件ant-design：

1、安装antd

yarn add antd;
npm install antd

2、安装@ant-design/icons 图标组件包：

yarn add @ant-design/icons
npm install @ant-design/icons

3、按需引入插件安装：

yarn

yarn add react-app-rewired customize-cra babel-plugin-import
npm install react-app-rewired customize-cra babel-plugin-import

3、自定义主题安装less 和 less-loader

yarn add less less-loader
npm install less less-loader

4 选项配置

1、修改package.json中scripts节点：

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

1、在项目根目录新建一个名为config-overrides.js的文件，按需引入组件和组件css样式表配置代码：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

1、按需引入+自定义主题配置代码：

const { override, fixBabelImports, addLessLoader, adjustStyleLoaders } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  })
);

1、按需引入+自定义主题配置代码：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
  adjustStyleLoaders(({ use: [, , postcss] }) => {
    const postcssOptions = postcss.options;
    postcss.options = { postcssOptions };
  })
);