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

@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(jehornguu@outlook.com)
// --------------------------------------------------

//#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';

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