Content Table
2019-09-28

iView 自定义主题

项目使用 Vue Cli 3 创建，SCSS 作为 Css Pre-processors，按照 iView 自定义主题文档 https://www.iviewui.com/docs/guide/theme 的步骤进行操作时报错了，下面是解决自定义主题的方法:

  1. 安装 Less: yarn add less less-loader --dev

  2. 在 vue.config.js 中配置 Less:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {
        css: {
            loaderOptions: { // 向 CSS 相关的 loader 传递选项
                less: {
                    javascriptEnabled: true
                }
            }
        },
    };

  3. 创建文件 public/static/iview-theme.less，在里面覆盖需要修改的 iView 主题的变量 (默认字体为 12px，有点小，修改为 14px):

    1
    2
    3
    4
    @import '~iview/src/styles/index.less';

    @font-size-small: 14px;
    @btn-font-size  : 14px;

  4. 在入口文件 main.js 内导入这个 less 文件:

    1
    2
    3
    4
    5
    6
    import 'iview/dist/styles/iview.css';
    import Vue from 'vue';
    import iView from 'iview';
    import '@/../public/static/css/iview-theme.less';

    Vue.use(iView);

  5. 启动项目，主题修改成功，但发现 Modal 中的字体还是 12px (modal.less 中写死了)，Switch 的字体为 14px 有点大，使用下面的样式强制修改它们的字体大小:

    1
    2
    3
    4
    5
    6
    7
    .ivu-modal-body {
        font-size: 14px !important;
    }

    .ivu-switch-inner {
        font-size: 12px !important;
    }

完整的变量列表可以查看 默认样式变量，覆盖需要修改的变量即可 (提示: 删除 @import "color/colors" 这一行)。