antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰

最新推荐文章于 2025-01-11 17:28:29 发布

MingleHDU

最新推荐文章于 2025-01-11 17:28:29 发布

阅读量3.1k

点赞数

分类专栏：前端学习 antD react 文章标签： antD react

本文链接：https://blog.csdn.net/MingleHDU/article/details/94723873

版权

本文详细介绍了如何在项目中自定义Ant Design (AntD)的主题颜色及实现组件的按需加载，包括配置Webpack、Babel及LESS加载器的步骤。通过设置webpack.config.theme.js中的主题色变量，并在webpack配置文件中引用，再配合.babelrc文件中的插件配置，实现了AntD组件样式个性化与项目资源优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置主题色

前期准备：

npm install babel-plugin-import --save-dev
npm install antd --save

1. webpack.config.theme.js中，设置主题色primary-color，并导出

module.exports={
    "primary-color": "#0ba29a",
    "link-color": "#0ba29a",
    "border-radius-base": "2px",
}

在这里插入图片描述
2. 配置webpack打包规则
在webpack.config.development.js和webpack.config.production.js中同时设置

const modifyVars = require('./webpack.config.theme.js'); //引入主题色设置文件

{
           test: /\.less$/,
           use: [{
               loader: MiniCssExtractPlugin.loader // creates style nodes from JS strings
           }, {
               loader: "css-loader",  // translates CSS into CommonJS