Webpack imports the same styles multiple times

Question

I've noticed, that my webpack configuration imports the same styles into head <style> tag multiple times, when I @import styles in sass file.

I think it's because of my global styles file, which looks like this:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '~material-design-lite/src/material-design-lite.scss';

I later import the styles in multiple other component style files:

@import 'global';

Is there some configuration that I've missed?
I thought I could import the global styles file in index.js file through import, but these imports must come first, and somehow I was not able to achieve that with webpack.

Answer 1

That's not an issue with webpack, more with your use of CSS. Since CSS assets are compiled statically, each stylesheet importing global has a copy in it. You could use Less, and the @import (reference) statement, or if you prefer CSS then load it separately and don't import it every time.