Antd如何优雅的定制主题

淩亂°似流年 2023-01-02 10:25 442阅读 0赞

官方有详细的说明，可以看[官方文档说明][Link 1]

我这里白话说一下：

antd react vue的配置是一样，思路就是：

因为antd的ui色调都是定义在了公用的样式配置文件：完整版可以看[这里][Link 2]

所以你可以使用你提供的less文件覆盖antd的less文件，达到定制主题的目的。antd也是官方推荐这样做。详尽的覆盖原理还是看less的[官方文档][Link 3]，也就是这个功能其实是less自身提供的。

改起来也很简单，如果你使用了vue-cli初始化的项目，只需要添加如下配置：

// vue.config.js
    module.exports = { 
      ...
      css: { 
        loaderOptions: { 
          less: { 
            // 这里的选项会传递给 css-loader
            lessOptions: { 
              modifyVars: { 
              	// 这里的配置将会覆盖less的变量，进而改变主题色调。
    			'primary-color': '#1DA57A',
    		},
              javascriptEnabled: true,
            },
          },
        },
      },
    
      ...
    }

以上，如果你使用的是自己的脚手架，也只是修改一下lessOptions即可，更多参考[less-loader][]

当然，这样还不够，因为你引入antd时候可能加载的是css，并非less，所以还需要改一下babel的配置

plugins: [
        [
          'import',
          { 
            libraryName: 'ant-design-vue',
            libraryDirectory: 'es',
            style: true, // 看下这里不能是css ，而是true
          },
          'ant-design-vue',
        ],
    ]

值得注意的是，如果你没写这个配置，那么你的antd不是按需引入，所以你需要把全局引入的样式表后缀由css改为less

> 如果你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的，改为 ant-design-vue/dist/antd.less。

至此算是配置完成，可以重启一下尝试是否生效，如果报错了，那么可能你的项目使用的不是less预编译，需要安装相应的less-loader。

最后，可能你会感觉这样为`vue.config.js`添加css样式的方式太low，其实可以完全单独将其提出成一个less文件，然后在vue.config.js中引入，当然，后者需要的格式并非less格式，所以需要一个转换的插件[less-vars-to-js][]

比如你的目录结构是下面这样：

vue.config.js
    my-antd-theme.less

vue.config.js中对应的配置为：

这样就保证了vue.config.js的干净整洁。

参考：  
https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f

[Link 1]: https://www.antdv.com/docs/vue/customize-theme-cn/
[Link 2]: https://github.com/vueComponent/ant-design-vue/blob/master/components/style/themes/default.less
[Link 3]: http://lesscss.org/usage/#using-less-in-the-browser-modify-variables
[less-loader]: https://github.com/webpack-contrib/less-loader
[less-vars-to-js]: https://www.npmjs.com/package/less-vars-to-js