问题
新建 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
中引入