使用less抽出公共的代碼，在不一樣的組建中引入致使公共代碼屢次打包問題

標題比較長，主要是沒有想到怎麼一句話歸納出這個問題。

你們若是使用react+react-router+less + webpack的技術棧來寫代碼的話，你可能一樣遇到這個問題。

好比你會把公共的顏色，字體大小，等等公用的放到一個相似叫base.less文件中，在你寫不一樣組建的時候經過@import 引入進來。相似下面的代碼

@import "../components/base.less";

.a-componnt__box {
    ...
}

ok，若是你是這樣作的，那麼在你打包的時候你會發現你的css中每個組建的css代碼都有公共的css代碼。這確定不是咱們想要的，那該怎麼解決呢？

首頁想到的是之前的方式，寫成不一樣的class直接給標籤加class ，好比，.red {color:red},可是這種方式就沒有必要使用less了。

其次咱們想到就引入一次不就好了，可是問題來了，你不經過@import 方式引入代碼，你在組建中寫變量會報錯。

在查閱了相關less-loader的代碼後，找到解決的方案：

@import (reference) "../components/base.less";

.a-componnt__box {
    ...
}

經過比較你可能已經發行多了一個(reference) 這個是什麼呢？想知道的話你本身google吧，我就不說了。上面的代碼還有一個前提，由於一旦使用了reference這個代碼就標示被@import的代碼不在會被引入，那麼也就是說你須要在知道的一個文件中經過@import "../components/base.less";引入一次。不然將都不會引入這個css。