Webpack импортирует одни и те же стили несколько раз

Question

Я заметил, что моя конфигурация webpack импортирует те же стили в голову <style> тег несколько раз, когда я стилю @import в sass-файле.

Я думаю, что это из-за мой глобальные стили файл, который выглядит следующим образом:

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

я позже импортировать стили в нескольких других файлах стилей компоненты:

@import 'global'; 

Есть ли какая-то конфигурация, которую я пропустил?
Я думал, что могу импортировать файл глобальных стилей в файл index.js через импорт, но этот импорт должен быть первым, и каким-то образом я не смог добиться этого с помощью webpack.

Answer 1

Это не проблема с webpack, больше с использованием CSS. Поскольку атрибуты CSS скомпилированы статически, каждая таблица стилей, импортирующая global, имеет в себе копию. Вы можете использовать Less и @import (reference) statement, или если вы предпочитаете CSS, загрузите его отдельно и не импортируйте его каждый раз.

Answer 2

Я думаю, это потому, что вы назвали файл global.scss вместо _global.scss. Подчеркивание говорит транспилеру, что это частичный и НЕ для создания файла для него.