SASSインポートユーティリティはすべてのファイルに適用されますが、一度だけです

Question

@importユニバーサルミックスインとキーフレーム（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キロバイトを持っていると私はutils.scssがインポートされている20個のファイルを持っています、 utils.scssが20回あるので、1,9 MBの冗長コードがあります。

Answer 1

.scssファイルの中からutilsを取り出し、他のファイルの前にmain.scssファイルに入れます。

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