iview 自定义主题样式

官方地址http://v1.iviewui.com/docs/guide/theme

官方提供了两种方法： 变量覆盖 使用安装工具修改

变量覆盖

在项目中创建一个my-theme文件夹，在该文件夹中创建index.less文件

在index.less文件中写入@import ‘~iview/src/styles/index.less’; 然后将https://github.com/iview/iview/blob/master/src/styles/custom.less 中的默认样式变量复制进来，这些是提供的可配置的样式变量表，在这里修改对应配置可以改变项目的颜色配置。

然后在入口文件 main.js 内导入这个 less 文件即可：

接下来是自定义变量，以自定义分页部分为例：

如图所示分页按钮为黑色，因为我的@primary-color也就是我的主体颜色为黑色，可是我的分页并不需要黑色，可以看到样式是在page.less文件中控制的，我们找到这个文件是在node_modules_iview@2.14.3@iview\src\styles\components\page.less，打开该文件找到对应位置如下