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实现动态表单动态渲染组件的方式第二篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下2021-07-07
这篇文章主要为大家介绍了Vue 2中实现CustomRef方式防抖节流示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文主要介绍了VUE 文字转语音播放的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
vue获取当前日期时间(使用moment和new Date())
在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下2023-06-06
文章介绍了四种在Vue.js中导出Excel文件的方法,包括前端使用xlsx库、exceljs,使用现成组件vue-json-excel,以及后端生成,每种方法都有其适用场景和优缺点,推荐根据具体需求选择合适的方法,需要的朋友可以参考下2025-12-12
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
这篇文章主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了在vue中使用console.log无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了Vue实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了Vue源码学习之数据初始化实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论