最近，在整理多頁面項目的時候，發覺在項目打包之後，css文件中最常引用的common.css文件居然重複出現了！！！
dist文件就過大了，css文件居然達到了2mb多，這就讓人很煩惱了啊。
到底是什麼問題導致它這麼龐大呢？
是因爲import多次，然後它重複了嗎？還是說css文件標籤上style套用了scope？還是說，自己項目中引用的順序有問題呢？比如說報錯 chunk chunk-12fe80be [mini-css-extract-plugin] Conflicting order. Following module has been added: 引起的（這個問題就是css的順序的問題，可以將vue文件的順序變動一下，或者將scc的順序變動，也就是說每一個vue文件中的vue引用順序都要一致）？但是這個問題不會導致css的重複。
scope也是會導致內容增多的，畢竟scope就相當於在文件中的css名稱中加多一個id，這個id是唯一的，而css名稱即便是唯一的這個時候都會有兩個以上的css內容。
然後就找到了less的終極武器： 命令reference。這個讓項目中的css體積大減哦。
@import (reference) 用於導入外部文件，但它不會增加導入樣式到編譯CSS文件。這已發佈了 1.5.0 版本。
記住，它不會增加導入樣式，但是該存在的樣式還是存在的。就不會有重複的樣式打包到css文件夾中了。
一開始還以爲webpack可以配置，還以爲可以將css中的common的css放在main.js（入口文件），隨後發覺，less中的一些變量，如果在頁面或者組件中不去引用，那麼打包是會出錯的。
The solution is to use @import (reference):
@import (reference) 'base.less';
.foo { ... }
參考地址： https://github.com/webpack-contrib/less-loader/issues/7