修改Ant-design-vue主题色
官方文档是这样写的
然后我就去找我的vue.config.js
里边原本有一个文件了，原本是这样的
原本使用这个reset.less呢，是为了重置样式，还有就是用来写公共样式的~
// css相关配置
css: {
// 启用 CSS modules
requireModuleExtension: true,
// 是否使用css分离插件
extract: false,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
less: { prependData: `@import "@/assets/css/reset.less;` }
},
},
好了，然后把要修改的主题色部分加上，就变成下边这样。
// css相关配置
css: {
// 启用 CSS modules
requireModuleExtension: true,
// 是否使用css分离插件
extract: false,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#007ac3',// 全局主色
},
javascriptEnabled: true,
},
prependData: `@import "@/assets/css/reset.less";`,
},
},
},
然后，我就发现修改之后，页面并没有发生什么变化...
最后发现，如果要修改了主题色，那么main.js中引入的css，
//antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
需要改成less，才可以修改成功
//antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
嗯，就酱~
tips:选css预编译器，可以看框架用的哪个~
转载请著名出处~
-----*13
