Antd如何优雅的定制主题
官方有详细的说明,可以看官方文档说明我这里白话说一下:antd react vue的配置是一样,思路就是:因为antd的ui色调都是定义在了公用的样式配置文件:完整版可以看这里所以你可以使用你提供的less文件覆盖antd的less文件,达到定制主题的目的。antd也是官方推荐这样做。详尽的覆盖原理还是看less的官方文档,也就是这个功能其实是less自身提供的。改起来也很简单,如果你使用了vue
官方有详细的说明,可以看官方文档说明
我这里白话说一下:
antd react vue的配置是一样,思路就是:
因为antd的ui色调都是定义在了公用的样式配置文件:完整版可以看这里
所以你可以使用你提供的less文件覆盖antd的less文件,达到定制主题的目的。antd也是官方推荐这样做。详尽的覆盖原理还是看less的官方文档,也就是这个功能其实是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中对应的配置为:
const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './my-antd-theme.less'), 'utf8'));
module.exports = {
...
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: themeVariables,
javascriptEnabled: true,
},
},
},
},
...
}
这样就保证了vue.config.js的干净整洁。
参考:
https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
更多推荐
所有评论(0)