如何全局修改Element UI默认字体大小？

Question

在使用 Element UI 时，如何全局修改默认字体大小是一个常见需求。由于 Element UI 的样式默认采用固定字体大小（如 14px），直接通过外部 CSS 覆盖存在优先级不足或作用范围不全的问题。开发者常尝试通过全局设置 `body` 或使用 `:global` 修改组件内部类名，但易遗漏部分组件或导致样式冲突。此外，未结合深度选择器（如 `>>>` 或 `/deep/`）可能导致 scoped 样式失效。如何在 Vue 项目中通过 SCSS 变量、主题定制或合理使用全局样式，实现对所有 Element UI 组件字体大小的统一调整，成为实际开发中的典型难题。

Answer 1

Element UI 全局修改默认字体大小的深度实践

在现代前端开发中，使用 Element UI 构建企业级管理系统已成为一种常见选择。然而，其组件库默认采用固定字体大小（如 14px），难以满足多端适配、可访问性或品牌设计规范的需求。如何在 Vue 项目中实现对所有 Element UI 组件字体大小的统一调整，是具备一定经验的开发者常遇到的技术挑战。

一、问题本质与样式优先级分析

• Element UI 的样式通过 SCSS 编译为 CSS，并注入到全局作用域中，具有较高的特异性。
• 直接在组件中使用 scoped 样式无法穿透子组件结构，导致修改无效。
• CSS 优先级不足时，即使设置 body { font-size: 16px }，也无法覆盖 Element 内部类名（如 .el-button .el-button__text）的显式声明。
• 未使用深度选择器（::v-deep、/deep/ 或 >>>）将导致样式隔离失效或不生效。
• 部分组件存在内联样式或动态类绑定，进一步增加了覆盖难度。

方法	是否推荐	适用场景	局限性
全局 body 设置 font-size	⚠️ 谨慎	简单项目	无法覆盖显式定义的组件字体
:global() + scoped CSS	✅ 可行	局部页面定制	易遗漏深层嵌套节点
SCSS 变量重写	✅✅ 强烈推荐	全项目统一主题	需引入源码或构建支持
Webpack 主题加载器	✅✅ 推荐	生产环境自动化	配置复杂度高
PostCSS 插件替换	✅ 实验性	构建时优化	维护成本高

二、解决方案层级演进：由浅入深

1. 初级方案：全局 CSS 覆盖（基础但有限）

适用于快速原型开发或临时调试：

/* global.css */
:global(.el-button) {
  font-size: 16px !important;
}
:global(.el-input__inner) {
  font-size: 16px !important;
}

此方式虽能生效，但需手动枚举每个组件类名，且 !important 易引发后续维护问题。

2. 中级方案：结合深度选择器进行 scoped 修改

在 Vue 单文件组件中利用 /deep/ 或 ::v-deep 穿透样式作用域：

<style scoped>
/deep/ .el-button,
/deep/ .el-input__inner,
/deep/ .el-select-dropdown__item {
  font-size: 16px;
}
</style>

优点在于可集中管理，但仍需识别关键类名，且不同版本 Vue 对深度选择器语法支持有差异（Vue 2 使用 /deep/，Vue 3 使用 ::v-deep）。

3. 高级方案：基于 SCSS 变量的主题定制（推荐路径）

Element UI 提供了完整的 SCSS 变量体系，可通过重写变量实现无侵入式主题定制：

// variables.scss
$--font-size-base: 16px !default;
$--button-font-size: $--font-size-base;
$--input-font-size: $--font-size-base;
$--dropdown-item-font-size: $--font-size-base;

@import '~element-ui/packages/theme-chalk/src/index';

随后在 Webpack 配置中替换默认样式引入：

{
  module: {
    rules: [
      {
        test: /element-ui\/.*\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    alias: {
      'element-ui': path.resolve(__dirname, 'src/styles/element-variables.scss')
    }
  }
}

三、构建流程整合与自动化策略

graph TD A[开始] --> B[创建自定义SCSS变量文件] B --> C[导入Element UI源码SCSS] C --> D[配置Webpack别名指向定制主题] D --> E[编译时生成新CSS] E --> F[全局应用统一字体] F --> G[输出一致性UI]

该流程确保了从构建层面对样式进行控制，避免运行时覆盖带来的性能损耗和优先级冲突。同时支持团队协作下的主题统一管理。

四、最佳实践建议与扩展思考

• 优先采用 SCSS 变量重写 + 构建工具集成 方案，保障可维护性和扩展性。
• 建立企业级 Design Token 体系，将字体、颜色、间距等抽象为可配置参数。
• 结合 CSS Custom Properties（自定义属性）实现运行时动态切换主题（需 Element Plus 支持）。
• 对于老旧项目迁移，可编写 PostCSS 插件批量替换 font-size: 14px → 16px。
• 使用 Stylelint 规则防止硬编码字体大小，推动团队规范落地。
• 考虑响应式字体：通过 clamp() 或 rem 单位实现跨设备适配。
• 监控 Lighthouse 可访问性指标，确保字体调整符合 WCAG 标准。
• 在 CI/CD 流程中加入视觉回归测试（Visual Regression Testing），防止样式意外回退。
• 文档化主题配置流程，便于新人快速上手。
• 探索微前端架构下多团队共用统一 Design System 的可能性。