使用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。