gulp 样式合并去重

Question

例如：

A.css文件里@inport base.css;

B.css文件里@inport base.css

然后我合并A，B.css，最后生成C.css会有2个base.css里的样式，怎么设置能把@inport去重啊？或者gulp有什么插件吗。。

Answer 1

请不要在CSS里使用@inport，这会阻塞浏览器的渲染，跟加载脚本差不多。

预处理器，比如sass会自动解决重复引用的问题。按照你的需求应该就是用gulp调用预处理器生成css吧。

Answer 2

gulp没这功能吧。。。webpack倒是有个插件

Answer 3

css clean

gulp-clean-css

new CleanCSS({
  level: {
    2: {
      mergeAdjacentRules: true, // controls adjacent rules merging; defaults to true
      mergeIntoShorthands: true, // controls merging properties into shorthands; defaults to true
      mergeMedia: true, // controls `@media` merging; defaults to true
      mergeNonAdjacentRules: true, // controls non-adjacent rule merging; defaults to true
      mergeSemantically: false, // controls semantic merging; defaults to false
      overrideProperties: true, // controls property overriding based on understandability; defaults to true
      removeEmpty: true, // controls removing empty rules and nested blocks; defaults to `true`
      reduceNonAdjacentRules: true, // controls non-adjacent rule reducing; defaults to true
      removeDuplicateFontRules: true, // controls duplicate `@font-face` removing; defaults to true
      removeDuplicateMediaBlocks: true, // controls duplicate `@media` removing; defaults to true
      **removeDuplicateRules: true,** // controls duplicate rules removing; defaults to true
      removeUnusedAtRules: false, // controls unused at rule removing; defaults to false (available since 4.1.0)
      restructureRules: false, // controls rule restructuring; defaults to false
      skipProperties: [] // controls which properties won't be optimized, defaults to `[]` which means all will be optimized (since 4.1.0)
    }
  }
});