Avoiding output duplication using webpack, less-loader and extract-text-webpack-plugin

Question

I'm using webpack to bundle my files, including css (less).

It works fine with css files, but as soon as I add less-loader in the game, less files required from other less files (common ones) are being duplicated in the output.

What I think I do:

     |-------entry.js-------|
     |                      |

componentOne.js           componentTwo.js
           |                                           |
     one.less                               two.less
           \                                          /
             \ ----- common.less ---- /

What webpack thinks I do:

     |-------entry.js-------|
     |                      |

componentOne.js           componentTwo.js
           |                                           |
     one.less                               two.less
           |                                           |
common.less                        common.less

This result in common.less being repeated in my output as many times as it is required. Again, without less-loader, common.css is recognized as the same module when required the second time.

Here's a repo illustrating this

EDIT : After some investigation it seems that imported less files from other less files are included by the less compiler and not the webpack require system. Duplicates would then make sense.

EDIT2 : A way to avoid this is to have your common.less files not outputting anything. Still has some limitations, for instance:

.@{a} () {
  // rules...
}

Answer 1

The @import syntax supports the ability to include your Less file without generating any output via the reference keyword.

@import (reference) 'common.less';

I use something like the above to reuse variables and mixins from Bootstrap, even if they are imported or require'd multiple times by different JavaScript files. The Less Import Options documentation describes the limitations of this feature and other options in more detail.