iview学习（二）

主题定制化

变量覆盖

项目目录下新建文件夹，例如: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。
然后主题就修改成功了。