Ant design Vue在Vite项目中如何自定义主题
笔者在Ant Design Vue文档中没找到关于在Vite项目中自定义主题的配置,经过一番研究发现与Vue-cli3配置大同小异便随手记录下来。步骤将main.ts(js)中的import 'ant-design-vue/dist/antd.css' 改为 import 'ant-design-vue/dist/antd.less'安装less loader(已安装的同学可以跳过)npm ins
·
笔者在Ant Design Vue文档中没找到关于在Vite项目中自定义主题的配置,经过一番研究发现与Vue-cli3配置大同小异便随手记录下来。
步骤
-
安装less(已下载的同学可以跳过)
npm install --save-dev less
-
将main.ts(js)中的
import 'ant-design-vue/dist/antd.css'
改为import 'ant-design-vue/dist/antd.less'
-
编辑项目根目录的vite.config.ts(js),modifyVars属性对应的就是自定义的颜色值
export default{ ... css: { preprocessorOptions: { less: { modifyVars: { 'primary-color': '#123', 'link-color': 'red', }, javascriptEnabled: true, } }, }, ... }
-
刷新页面即可生效(项目正在运行的情况不刷新也会自动更新生效)
更多推荐
已为社区贡献2条内容
所有评论(0)