SASS將utils導入到所有文件，但只有一次

Question

有沒有什麼辦法可以將@import某些帶有通用mixin和關鍵幀的文件（utils.scss）添加到所有其他scss文件？

// main.scss, this file is linked in html: <link rel="stylesheet" href="main.scss">. 
@import "home.scss"; 
@import "about.scss"; 

// home.scss 
@import "utils.scss"; 
... 

// about.scss 
@import "utils.scss"; 
... 

// utils.scss 
@keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

這沒關係，一切正常，但有utils.scss更多次，結果文件：

// Result 
@keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

當utils.scss具有100 KB（含壓縮），我有20個文件，其中utils.scss進口，有1,9 MB冗餘代碼，因爲有20次是utils.scss。

Answer 1

把utils從個人.scss文件中取出並放在main.scss文件之前的其他文件。

// main.scss 
@import "utils"; 
@import "home.scss"; 
@import "about.scss";