修改Ant-design-vue主題色
官方文檔是這樣寫的
然后我就去找我的vue.config.js
里邊原本有一個文件了纽甘，原本是這樣的
原本使用這個reset.less呢楼咳，是為了重置樣式丸边，還有就是用來寫公共樣式的~
// css相關(guān)配置
css: {
// 啟用 CSS modules
requireModuleExtension: true,
// 是否使用css分離插件
extract: false,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {
less: { prependData: `@import "@/assets/css/reset.less;` }
},
},
好了贮竟，然后把要修改的主題色部分加上，就變成下邊這樣掷倔。
// css相關(guān)配置
css: {
// 啟用 CSS modules
requireModuleExtension: true,
// 是否使用css分離插件
extract: false,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#007ac3',// 全局主色
},
javascriptEnabled: true,
},
prependData: `@import "@/assets/css/reset.less";`,
},
},
},
然后眉孩，我就發(fā)現(xiàn)修改之后，頁面并沒有發(fā)生什么變化...
最后發(fā)現(xiàn)，如果要修改了主題色浪汪，那么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預(yù)編譯器广恢，可以看框架用的哪個~
轉(zhuǎn)載請著名出處~
-----*13
