@vue-cli3配合element和scss打包的配置

標簽（空格分隔）： Vue

---

使用@vue-cli3初始化項目，且使用ElementUI，然后按照官方文檔自定義主題。

自己的scss全局變量文件，比如叫var.scss，為了風格一致，會引用一些element-variables.scss的樣式。

此時所有頁面的樣式都需要引用_var.scss，但是為了方便，我們在vue.config.js中統一配置從而不必每個頁面都寫一遍@import：

module.exports = {
    ...
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/_var.scss";
                `
            }
        }
    }
};

注意@表示src目錄。

---

問題來了，如果你的_var.scss直接引用了element-variables.scss：

_var.scss

@import "element-custom-variables";

//
// Variables
// 1. Colors, 2. Z-index, 3. Container size, 4. Grid, 5. Typography, 6. Components
// @version 1.0.0
// @author  Jehorn([e-mail])
// --------------------------------------------------

//#region 1. Colors
//
//## Global colors

//** usual-gray
$ve-color-black:            #000 !default;
$ve-color-white:            #fff !default;

...

element-variables.scss

/* Colors
-------------------------- */
$--color-primary: #409EFF !default;
...
/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

這時你會發現打包(npm serve/build)都會特別慢，而且build后的css文件異常大：

問題就在element-variables.scss最后一行：@import "~element-ui/packages/theme-chalk/src/index";，它引用了element的所有樣式，這樣導致所有樣式在每個包都重新打包了一遍；發現問題原因就好說了。

我們只需要把這個文件拆開，自定義主題的變量一個文件，element樣式的import一個文件。前者在自己的全局變量文件_var.scss引用，后者在mian.js直接import即可：

element-variables.scss

/* Colors
-------------------------- */
$--color-primary: #409EFF !default;
...

element-custom.scss

@import "element-variables";

/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

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

_var.scss

@import "element-variables";
...

main.js

...
import './styles/element-custom.scss';

這樣打包后文件體積就正常了，如圖所示。