vue3+vite+antd如何实现自定义主题
更新时间：2024年03月21日 11:03:50 作者：幸福浅暧
这篇文章主要介绍了vue3+vite+antd如何实现自定义主题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、首先需要下载less、less-loader
npm i less less-loader --save
二、main.ts中引入antd样式的地方要改为.less
//不要使用 import "ant-design-vue/dist/antd.css"; //注意要使用.less import "ant-design-vue/dist/antd.less"
三、vie.config.ts文件，找css配置项
加入以下代码
modifyVars中即为你需要自定义的主题字段
主题样式字段可从antd官网查找 antd官网-自定义主题，根据说明改成你自己的样式即可
// modifyVars即为你需要修改的主题
css: {
preprocessorOptions: {
less: {
modifyVars: {
'primary-color': '#FF763B',
'border-color-base': '#FF763B',
'box-shadow-base': '0 2px 8px #FF763B'
},
javascriptEnabled: true,
},
}
}
注意：
- 1、一定要下载less、less-loader包
- 2、main.ts中引入antd样式的地方一定要改为.less
如果未生效
请先检查注意中的两个点
如果配置了按需引入，需要对 unplugin-vue-components 包
在vite.config.ts做配置
npm i unplugin-vue-components
vite.config.ts引入组件并配置
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: 'less'
})
]
})
]
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
本篇文章主要介绍了vue封装第三方插件并发布到npm的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文通过实例代码给大家介绍了vue实现底部菜单功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
详解Vue中的render: h =＞ h(App)示例代码
这篇文章主要介绍了Vue中的render: h =＞ h(App),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue render函数动态加载img的src路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
下面小编就为大家分享一篇使用vue-router设置每个页面的title方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
使用 Element UI Table 的 slot-scope方法
这篇文章主要介绍了使用 Element UI Table 的 slot-scope方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要为大家介绍了VuePress使用Algolia实现全文搜索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了vue-drawer-layout实现手势滑出菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论