Why are css selectors duplicated (SCSS)?

Question

JavaScript

I have one .scss file that is included 4 times in other .scss files, why is the content of this file included 4 times in bundle.css? How to solve this problem?
file_1.scss:

.header_video_titles {
    margin-top: 10%;
}

file_2.scss, file_3.scss, file_4.scss: As a result, bundle.css contains:
@import "file_1.scss"

.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

Solution, posons: https://www.npmjs.com/package/optimize-css-assets-...