Ant Design Vue 定制主题

方案一:全局引入

main.ts中引入组件库样式

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

方案二:按需引入

通过lessmodifyVars属性
vite.config.js

css: {
 preprocessorOptions: {
 less: {
 modifyVars: {
 //放到一个文件中
 hack: 'true; @import "@/styles/theme.less"',
 //直接使用变量
 'primary-color': '#1DA57A',
 'link-color': '#1DA57A',
 'border-radius-base': '2px',
 },
 javascriptEnabled: true
 }
 },
},

这种方法要注意的是,组件是通过unplugin-vue-components插件来加载的,所以还要配置如下

Components({
 dirs: ["src/components"],
 resolvers: [AntDesignVueResolver({
 sideEffect: true,
 importStyle: 'less'
 })],
}),

参考文章:官网具体参考此文章

作者:明未为洺原文地址:https://segmentfault.com/a/1190000043787216

%s 个评论

要回复文章请先登录注册