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

Question

У меня есть один файл .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%;
}

Answer 1

Это происходит потому, что когда вы запускаете импорт, все содержимое css копируется в новый файл, так как в итоге все компилируется в 1, исходный код группируется с остальными, что приводит к повторному коду.