修改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";`,
             },
        },
    },  

然后，我就發(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預編譯器，可以看框架用的哪個~

轉載請著名出處~
-----*13