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。

然后主题就修改成功了。