Ant Design 如何全局定义主题颜色

最新推荐文章于 2025-10-14 15:52:49 发布

转载最新推荐文章于 2025-10-14 15:52:49 发布 · 9.6k 阅读

文章标签：

#Ant Design #自定义主题

Ant Design 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Webpack中定制主题，通过修改less-loader的options属性，实现对less变量的覆盖，从而轻松更改项目的颜色和样式。

在 webpack 中定制主题

我们以 webpack@4 为例进行说明，以下是一个 webpack.config.js 的典型例子，对 less-loader 的 options 属性进行相应配置。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}