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