Ant-design-vue修改主题色 vue-cli3

修改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