vue/iview 样式

临时改变组件的默认样式

例如想将表格的字体默认为 12px, 加大到 13px，仅针对当前 vue 文件生效：

<style scoped>
.tfont >>> .ivu-table-cell {
    font-size: 13px;
}
</style>
 
<template>
    <div>
        <Table class="tfont"></Table>
    </div>
</template>

scoped style 影响 child component 的方法:
https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

全局修改默认样式

如果做成全局 style ，则对整个的页面都有影响，不推荐

<style>
.ivu-table-cell {
    ...
}
</style>

修改 iview 基础样式

若想全局定义 iview 基础属性，比如字体，若一个一个组件的修复，太繁琐还容易遗漏。
这时自定义 theme: https://www.iviewui.com/docs/guide/theme 修改 iview 的基础样式是最好的办法。

方法：

1. 建一个目录：mkdir -p front/src/css/iview-theme
2. 目录下新建一个 index.less，前半部分是标准的修改 iview theme 需要的引入，后半部分是需要重载的 iview 的样式。

@import '~view-design/src/styles/index.less';
 
@font-size-base         : 12px;
@font-size-small        : 12px;
@font-size-large        : @font-size-base + 2px;
 
/* 后半部分 */
 
/* 全局修正菜单字体偏小的问题 */
.ivu-menu-submenu-title {
    font-size: 14px;
}
 
.ivu-menu-item {
    font-size: 13px !important;
}
/* 菜单字体修正结束 */

3. 项目的 main.js 中要包含这个 index.less

// iview styles
import './css/iview-theme/index.less';
import iView from 'view-design'

4. npm 添加对 less 的编译支持：

npm install less-loader less style-loader --save-dev

5. webpack 要支持对 less 文件的编译：

rules: [
    ...
    {
        test: /\.less$/,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            },
            {
                loader: 'less-loader',
                options: {
                    lessOptions: {
                        javascriptEnabled: true, // 注意这里
                    }
                }
            }
        ]
    },
]