在vue项目搭建时使用antd全局修改主题色

最新推荐文章于 2025-04-16 09:08:16 发布

是小芬达啊

最新推荐文章于 2025-04-16 09:08:16 发布

阅读量6.7k

点赞数 4

本文链接：https://blog.youkuaiyun.com/weixin_52921391/article/details/118406851

版权

我们使用vue做项目时，特别是后台管理系统，大多数都会选择一个ui组件框架
这里以ant-design-vue为例，修改组件的主题色
ant-design-vue上也有定制主题，像这样：

1.因为antd 的样式使用了 Less 作为开发语言，所以我们修改主题色需要下载less和less-loader，注意版本不要太高，容易出问题
建议下载这两个版本，亲测有效
“less”: “^2.7.3”,
“less-loader”: “^5.0.0”,
我用的cnpm，没下载淘宝镜像的可以直接npm
cnpm i less@2.7.3 --save
cnpm i less-loader@5.0.0 --save

2.在vue-config-js里修改配置
想修改的配置可以是这些：

module.exports = {
  css: {
    loaderOptions: {
      less: {
          modifyVars: {
            'primary-color': '#05AE44',
            'link-color': '#05AE44',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true
      },
    },
  },
};

3.在main.js里引入
注意如果你是通过 ‘ant-design-vue/dist/antd.css’ 引入样式的，改为 ant-design-vue/dist/antd.less，不然修改主题色不会生效

import Vue from 'vue'

//less
import less from 'less'
Vue.use(less)


//自定义的样式
import '../src/assets/css/common.css'

//ant 框架
import Antd from 'ant-design-vue'
//ant的样式引入
import 'ant-design-vue/dist/antd.less'
Vue.use(Antd)

4.在vue组件中引入ant-design的ui组件看是否生效，成功了

<template>
  <div>
   	<a-button type="primary">Primary</a-button>
  </div>
</template>

到这里就结束啦，欢迎留言