使用less抽出公共的代码,在不同的组建中引入导致公共代码多次打包问题

原创
2018/01/15 11:07
阅读数 1K

标题比较长,主要是没有想到怎么一句话概括出这个问题。

大家如果使用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。

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部