今天写后台管理系统的时候,发现有很多颜色一样可以去自定义主题,那么问题来了我们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,},},},},