为什么CSS选择器重复？ （SCSS）

Question

我有一个.scss文件在其他.scss文件中连接了4次，为什么该文件的内容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编译，原始代码与其他代码分组在一起，从而导致重复代码。