Почему css-селекторы дублируются (SCSS)?

Question

[Jun1801]

У меня есть один файл .scss, который подключен 4 раза в других файлах .scss, почему содержимое этого файла 4 раза включено в bundle.css? Как решить эту проблему?

file_1.scss:

.header_video_titles {
    margin-top: 10%;
}

file_2.scss, file_3.scss, file_4.scss:
@import "file_1.scss"

В результате, bundle.css содержит:

.header_video_titles {
    margin-top: 10%;
}
.header_video_titles {
    margin-top: 10%;
}
.header_video_titles {
    margin-top: 10%;
}
.header_video_titles {
    margin-top: 10%;
}

Comments

[Юрий Горбунов]

А для чего вы 4 раза его подключаете в разных файлах? Это не модули JS, которые нужно в каждом файле подключать. Достаточно один раз подключить вначале и он будет доступен во всех файлах ниже по списку.
В ином случае можно написать задачу для сборщика Gulp, например, которая будет убирать дублирующийся код, но это лишний этап в вашей схеме.

[Jun1801]

Юрий Горбунов, Это упрощенный пример, я подключаю файл с scss-переменными.
Я не могу подключить его только 1 раз в корне, т.к. тогда вообще ничего не соберется (неизвестная переменная будет)

[Дмитрий Беляев]

Jun1801, файлы с переменными, миксинами, функциями не должны содержать в себе кода транспилируемого в css (деклараций классов и тд)
Так что лучшим решением будет навести порядок в файлах

Answer 1

[Jun1801]

Решение проблемы, посоны: https://www.npmjs.com/package/optimize-css-assets-...