ant-design更换主题颜色

转载：https://blog.csdn.net/zhangyuxuan2/article/details/88868822

需求

使用ant-design-vue，框架本身使用的蓝色主题色，需要更换成UI指定的颜色。

解决方案

在build文件夹下找到util.js，在util.js文件中找到function generateLoaders，修改return部分

// https://vue-loader.vuejs.org/en/configurations/extract-css.htmlreturn {css: generateLoaders(),postcss: generateLoaders(),// less: generateLoaders('less'),less: generateLoaders('less', {modifyVars: {// 这三个地方都设置成你需要的主题色'primary-color': '#d10100','link-color': '#d10100','border-radius-base': '2px',},javascriptEnabled: true,}),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')}

踩坑注意

此处只提供使用vue-cli构建的项目踩坑提示，如果在main.js中引入的是antd.css，需要注意可能修改了不生效，此时需要将main.js中引入的antd.css修改成antd.less，并且安装less loader，执行：npm install less less-loader --save-dev即可安装。

其他构建方式如果修改之后不生效请参看官网：
ant-design-vue配置主题色不生效

ant-design更换主题颜色相关推荐

Ant-design-vue更换主题颜色
package.json "antd-theme-generator": "^1.2.5", "antd-theme-webpack-plugin&q ...
一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...
Matlab如何更换主题颜色
Matlab主题指的是Matlab的菜单栏,命令行窗口,工作区,编辑器及代码的颜色.Matlab本身只有一种默认主题,如下图. 这是一种亮色主题,长时间使用容易引起眼睛疲劳.于是就有了给Matlab换 ...
vux组件库更换主题颜色的方法
1.在vue项目的src目录下建立style文件夹 2.在style文件夹中建立theme.less(你想要修改的插件主题,可以参考官网给出的https://github.com/airyland/v ...
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
转载: Android开发浅谈：关于如何把手机壳颜色设置为我们App的主题颜色
昨天一则新闻刷爆了微博,并迅速的攻占了我们的朋友圈. 中国平安财险科技中心,一个程序员把产品经理给打了,原因是产品经理提出一个需求:根据用户手机壳的颜色可以改变App的主题颜色-然后他就被程序员给打了 ...
Android开发浅谈：关于如何把手机壳颜色设置为我们App的主题颜色
昨天一则新闻刷爆了微博,并迅速的攻占了我们的朋友圈. 中国平安财险科技中心,一个程序员把产品经理给打了,原因是产品经理提出一个需求:根据用户手机壳的颜色可以改变App的主题颜色.....然后他就被程序 ...
Ant design vue中实现动态更换主题色
一.创建vue项目可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口输入文件名 ,文件名最好是英文然后进行配置功能, 根据需求选择配置功能这里最好选择2.0版本, 可以 ...
ant design的自定义主题 modifyVars无效的原因
ant design的自定义主题 config-overrides.js文件 const {override,fixBabelImports,addLessLoader} = require('cus ...

ant-design更换主题颜色

ant-design更换主题颜色

需求

解决方案

踩坑注意

ant-design更换主题颜色相关推荐

最新文章

热门文章