vue3.0自定义ant-design-vue主题

今天写后台管理系统的时候，发现有很多颜色一样可以去自定义主题，那么问题来了我们vue3+vue-cli4怎么去自定义呢？

1. 先在css文件夹下创建一个.less文件，存放公共信息
2. 在该文件引入antd样式

@import '~ant-design-vue/dist/antd.less';

ps：得是less样式
3. 自定义主题

@primary-color: #ec7d2e; // 全局主色@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @primary-color;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
@menu-icon-size: @font-size-base;
@menu-icon-size-lg: @font-size-lg;
@layout-header-background: #fff;

4. 在main.js引入你创建的.less文件

import Antd from './antd';
import './assets/css/theme.less';
app.use(store).use(router).use(Antd).mount('#app');

若遇见Inline JavaScript is not enabled. Is it set in your options?
在vue.config.js下定义 javascriptEnabled: true即可

const path = require('path'); //引入path模块
function resolve(dir) {return path.join(__dirname, dir); //path.join(__dirname)设置绝对路径
}
module.exports = {css: {requireModuleExtension: true,loaderOptions: {sass: {},less: {lessOptions: {// javascriptEnabled: true,},},},},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！