修改element ui主题颜色后 导致启动vue项目很慢

问题

新建 src\styles\element-variables.scss 文件，通过在 src\styles\index.scss 文件中引入。然后导致启动项目很慢。

// element-variables.scss
/* theme color */
$--color-primary: #6672fb;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;

$--button-font-weight: 400;

// $--color-text-regular: #1f2d3d;

$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;

$--table-border: 1px solid #dfe6ec;

/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

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

原因

因为 src\styles\index.scss 文件是全局引入，所以 src\styles\element-variables.scss 文件中引用的 @import "~element-ui/packages/theme-chalk/src/index"; 样式会在每个编译后的css文件中都输出一遍，导致打包后的css文件体积变大很多。

解决

将 src\styles\element-variables.scss 文件改为在 main.js 中引入