ant-design-vue 动态主题 css前缀变更
由于项目需要变更css 缀所以需要执行以下代码
lessc --js --modify-var="ant-prefix=custom" ant-design-vue/dist/antd.variable.less modified.css
但是执行文案之后的css 就不能通过变量修改颜色等其他主题相关的配置
通过查阅各种资料终于找当了相关方法
这个地方主要是 lessc --modify-var 命令的运用
lessc --js --modify-var="ant-prefix=course-map" --modify-var="@base-primary=#D6AA56" --modify-var="@border-radius-base=4px" node_modules/ant-design-vue/dist/antd.variable.less modified2.css
这个地方有个小坑,光网上的给的一些公共变量修改以后只是修改一些组件的颜色,并不是全局的,这里可以通过查看源码然后找到相应的全局变量然后统一修改
动态修改全局主题
npm install -D webpack-theme-color-replacer/client
新建一个theme.js
/* eslint-disable @typescript-eslint/no-var-requires */
const client = require('webpack-theme-color-replacer/client'); // 替换颜色对象
const { generate } = require('@ant-design/colors'); // 提取ant-design的颜色
const theme = {color: '#D6AA56', // '#D6AA56'mode: 'dark',success: '#52c41a', // 成功色warning: '#faad14', // 警告色error: '#f5222f' // 错误色
};
function getAntdColors(color) {return generate(color);
}
function getThemeColors(color) {const _color = color || theme.color;const replaceColors = getAntdColors(_color);return replaceColors;
}
// 动态修改颜色方法
function changeThemeColor(newColor) {const promise = client.changer.changeColor({newColors: getThemeColors(newColor)});return promise;
}
// 初始化颜色
function modifyVars(color) {const _color = color || theme.color;const palettes = getAntdColors(_color);const primary = palettes[5]; // ;'#ff00ff'return {'border-radius-base': '5px','btn-border-radius-base': '5px','border-radius-sm': '2px','table-border-radius-base': '2px','bg-color': '#f2f2f2','primary-color': primary,'btn-primary-color': '#fff','text-color': '#333333', // 主文本色'text-color-secondary': '#666666', // 次文本色'success-color': theme.success,'warning-color': theme.warning,'error-color': theme.error,'processing-color': primary,'ant-prefix': 'course-map'};
}
module.exports = {getThemeColors,changeThemeColor,modifyVars
};
在vue.config.js 中配置
const { getThemeColors, modifyVars } = require('./src/utils/theme');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
//配置less loader css: {// 是否分离css true:分离css,会造成css无法热更新,false:会把css打包进js中,js一更新css自然更新extract: process.env.NODE_ENV !== 'development',sourceMap: false,loaderOptions: {less: {// 配置全局css变量 或者 在css文件中添加globalVars: {},modifyVars: modifyVars(),javascriptEnabled: true}}},configureWebpack() {const config = {plugins: [openGzip(),new ThemeColorReplacer({fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名,支持[contenthash]和[hash]。matchColors: getThemeColors(), // 用于提取 css 文件的颜色数组,支持 rgb 和 hsl。injectCss: true // 将 css 文本注入 js 文件,不再需要下载 `theme-colors-xxx.css`})]};if (IS_OPEN_PREVIEW_PLUGIN) {config.plugins.push(previewBuild());}return config;},
在页面中使用
import { changeThemeColor } from '@/utils/theme';
changeThemeColor(data.primaryColor);
ant-design-vue 动态主题 css前缀变更相关推荐
- Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
- Ant Design Vue 动态路由
main.js 引入 router import router from './router' new Vue({router,i18n,created: bootstrap,render: h =& ...
- vue3+ant design vue 动态加载Icon图标
问题与思路 在使用前端组件库时,我们常常会遇到需要动态加载 Icon 图标,如何处理这一需求,是前端开发人员必须思考的问题.在 vue 中,有一个内置组件 component,它的主要作用是配合 is ...
- vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包 配置路由权限 在config文件夹下router.config.js中配置路由权 ...
- 基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
- ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
- ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询 实现参数转换层 最终对接效果 在 上一篇 博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
- 2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点 拖拽播放 桌面歌词 mini模式 自定义托盘右键菜单 任务栏缩略图,歌曲操作 音频可视化 自动/手动检查更新 Nedb数据库持久化 自定义安装路径,安装界面美化 浏览器中启动客户端 Travis ...
- vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(2)
回顾 上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客 上篇文章搭建了vue3项目,引入了ant ...
- Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
最新文章
- 测试1111111111111111111
- c语言小数点进制转换,新手求教,关于含小数的二进制转换成十进制
- ESP32-S3与ESP32-S2相比,有什么不同呢?
- csc.exe的环境变量设置
- 新客户上云 –虚拟机及相关服务常见问题集锦
- java通信rs485_基于VB6.0与485仪表的Modbus RTU通信(含代码)
- Ubuntu10.04下配置和使用JDK-Mysql-Tomcat-SVN
- UAC1.0和UAC2.0区别(八)
- Android IOS WebRTC 音视频开发总结(二二)-- 多人视频架构模式
- 哈希摘要、证书、对称密钥、公私密钥应用场景梳理
- java hotspot server_Java HotSpot(TM)64位服务器VM警告
- tp1900芯片对比7621a_MT7621A /MT7620N / MT7620A单频双频刷机教程(区别于高通芯片刷机过程)...
- 《linux内核分析》第二次课 实验作业
- Codeforces Round #322 B Luxurious Houses
- 【中亦安图】导致Oracle性能抖动的参数提醒(4)
- # c语言判断字符类型
- K-means最优K值计算(利用SSE)
- 科普 | 继Wi-Fi 6之后的Wi-Fi 6E
- JS实现双向绑定的几种方式
- 解决CentOS磁盘空间不足