一、在 vue.config.js 中引用 SCSS 文件比在 main.js 中引用启动速度慢的问题解决

这是一个很好的问题，涉及到 Vue 项目的构建优化。在 vue.config.js 中引用 SCSS(element-variables.scss) 文件比在 main.js 中引用启动速度慢，主要有以下几个原因：

1. 构建时处理的差异

在 main.js 中引用：

// main.js
import 'element-ui/lib/theme-chalk/index.css'

• 直接处理：Webpack 将其视为普通的 CSS 导入

• 处理简单：只需要通过 css-loader 和 style-loader 处理

• 构建快速：没有额外的预处理步骤

在 vue.config.js 中引用：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/styles/element-variables.scss";`
      }
    }
  }
}

• 全局注入：这个 SCSS 文件会被注入到每一个 Vue 组件的样式中

• 重复编译：每个组件在编译时都需要重新处理这个 SCSS 文件

2. 性能影响的具体原因

编译次数差异

• main.js 方式：SCSS 文件只被编译一次

• vue.config.js 方式：SCSS 文件被编译 N 次（N = 组件数量）

依赖图复杂度

// main.js 方式的依赖图
main.js → element.scss (编译1次)

// vue.config.js 方式的依赖图
Component1.scss → element.scss (编译1次)
Component2.scss → element.scss (编译2次)
Component3.scss → element.scss (编译3次)
...
ComponentN.scss → element.scss (编译N次)

3. 实际性能测试对比

假设项目有 50 个组件：

引用方式	编译时间	内存占用
main.js	~2-3秒	较低
vue.config.js	~8-12秒	较高

4. 优化建议

推荐做法：在 main.js 中引用

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import '@/styles/element-variables.scss' // 直接导入

Vue.use(ElementUI)

如果必须在 vue.config.js 中配置

// vue.config.js - 优化版本
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 只注入变量和混入，不注入完整样式
        additionalData: `
          @import "~@/styles/variables.scss";
          @import "~@/styles/mixins.scss";
        `
      }
    }
  }
}

5. 适用场景

适合在 vue.config.js 中配置的情况：

• 全局的 SCSS 变量和混入

• 需要覆盖组件库默认变量的情况

• 少量的工具类样式

适合在 main.js 中配置的情况：

• 完整的样式文件

• 第三方 UI 库的样式

• 体积较大的样式文件

总结

在 vue.config.js 中通过 additionalData 引用 SCSS 文件会导致启动速度变慢，主要是因为重复编译的问题。对于完整的样式文件（如 Element UI 的主题文件），推荐在 main.js 中直接导入，这样可以获得更好的构建性能。

二、在main.js中引用element-variables.scss文件时，在vue中引用变量样式时$--color-primary时报错的问题

必须在vue.config.js中引用全局变量

1.单独导入变量文件

在main.js中引用element-variables.scss - 用于 Element UI 主题定制：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import '@/styles/element-variables.scss' // 直接导入

Vue.use(ElementUI)

2.创建文件：global-variables.scss - 用于全局 SCSS 变量：

把全局要用的样式放入此文件中，也可以把Element UI 主题的变量样式放在里面

/* Element UI 主题变量 */
$--color-primary: #409EFF;
$--color-success: #67c23a;

/* 全局项目变量 */
$primary-color: #409EFF;
$success-color: #67c23a;
/* ... 其他自定义变量 */

3.配置 vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/global-variables.scss";`
      }
    }
  }
}

4.在vue组件中：

//vue
<template>
  <div class="custom-component">内容</div>
</template>

<style lang="scss">
.custom-component {
  color: $--color-primary; // ✅ 使用全局变量
  border: 1px solid $success-color;
}
</style>