ant-design-vue自定义主题

首先看官方文档的解释:

Ant Design Vue 定制主题

根据需要,我这里是vue3的版本

1、修改vue.config.js,新加入如下代码块

module.exports = {

    ........
    ........
    ........

    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        'primary-color': '#1DA57A',
                        'link-color': '#1DA57A',
                        'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },

};

2、修改main.js文件,引入

import 'ant-design-vue/dist/antd.less'

3、定制主题用的是less样式文件,需要在vue项目中,引入less的插件

npm install -D [email protected]
重点就是这个,要使用6版本的less-loader

我这里的less版本时4.5

npm  i  less

看了很多的教程,配置后发现项目无法编译,因为语法错误

其中语法错误之一:https://blog.csdn.net/qq_43319748/article/details/123166327icon-default.png?t=M1L8https://blog.csdn.net/qq_43319748/article/details/123166327

最后尝试6.0.0版本发现编译通过,主题色改变

ant-design-vue自定义主题_第1张图片

 

你可能感兴趣的:(js,vue.js,typescript,前端)