背景与常见陷阱

在基于 @vue/cli 3 搭建的项目中，若集成了 Element UI 组件库并计划进行深度主题定制，通常会创建独立的 SCSS 变量文件来统一管理色彩、字体等设计令牌。为了保持代码整洁，开发者往往倾向于通过 vue.config.js 的全局配置，将自定义变量自动注入到每一个 .scss 文件中，从而避免在每个页面手动编写 @import 语句。

问题根源分析

虽然上述自动化注入方案能提升开发效率，但如果在全局变量文件的内部逻辑中直接引用了 Element UI 的核心样式索引（例如 @import "~element-ui/packages/theme-chalk/src/index"），就会引发严重的构建性能问题。

由于该全局变量会被预处理器附加到项目中的每个组件样式表上，Element UI 的整套基础样式实际上被重复打包了数百次甚至上千次。这不仅导致 npm serve 编译时间大幅延长，还会使最终生成的生产环境 CSS 文件体积异常膨胀，严重影响加载速度。

优化方案：变量与样式解耦

解决该问题的核心思路在于"分离关注点"。我们需要将仅定义变量的配置文件与引入完整样式的入口文件完全拆分开来：

• 变量文件：仅包含颜色、间距等 $-- 开头的自定义声明，供全局配置读取。
• 样式文件：负责真正引入 Element 的源码并生成 CSS，仅在应用入口处加载一次。

具体实施步骤

1. 拆分主题配置文件

首先创建一个新的纯变量文件 assets/styles/element/var.scss，仅存放需要修改的设计参数：

// assets/styles/element/var.scss
/* 主色调 */
$--color-primary: #35495E !default;
/* 边框颜色 */
$--border-color-base: #dcdfe6 !default;
/* 其他变量定义... */

接着创建实际的样式引入文件 assets/styles/element/theme.scss，在此处处理完整的样式导入及图标路径修正：

// assets/styles/element/theme.scss
// 引入自定义变量
@import "./var.scss";

// 修正图标字体路径，防止编译后 404
$--font-path: '~element-ui/lib/theme-chalk/fonts';

// 正式导入 Element 计算后的样式
@import "~element-ui/packages/theme-chalk/src/index";

2. 调整 Webpack 全局注入

修改项目根目录下的 vue.config.js，确保 Loader 只注入变量部分，不再带入样式本体：

// vue.config.js
const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 指向纯变量文件，避免循环或重复引入样式
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/styles/element/var.scss')}";`
      }
    }
  }
};

3. 更新应用入口

最后，在 src/main.js 中显式引入刚才创建的完整样式文件 theme.scss，确保整个应用只打包一份 Element 样式：

// src/main.js
import Vue from 'vue';
import App from './App.vue';

// 单独引入处理好的主题样式
import '@/assets/styles/element/theme.scss';

new Vue({
  render: h => h(App)
}).$mount('#app');

效果验证

经过上述调整后重新执行构建命令，你会发现编译耗时显著降低，且产出的静态资源文件中 CSS 体积回归正常水平，消除了冗余内容。