@import inserts duplicates 在webpack打包的vue项目 css文件重复了

文件重复了"/>

@import inserts duplicates 在webpack打包的vue项目 css文件重复了

最近，在整理多页面项目的时候，发觉在项目打包之后，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 { ... }

参考地址：