1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue3.0自定义ant-design-vue主题

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

时间:2024-03-01 05:00:42

相关推荐

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

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

先在css文件夹下创建一个.less文件,存放公共信息在该文件引入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;

在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,},},},},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。