主题定制化
变量覆盖
项目目录下新建文件夹,例如:my-theme,然后再my-theme文件下新建index.less文件,文件内容如下:
@import '~iview/src/styles/index.less';
@primary-color: #8c0776;
完整的变量别表查看默认样式变量;
然后再main.js内导入这个less文件即可;
import '../my-theme/index.less';
注意:
官方文档提供的有BUG,变量覆盖之前,需要安装 less less-loader,如下:
npm install --save-dev less less-loader
找到build 文件夹下 webpack.base.conf.js文件,修改如下:
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
extensions 增加 .less。
然后主题就修改成功了。
网友评论