SASS importer util pour tous les fichiers, mais une seule fois

Question

Y at-il un moyen de @import certains fichiers avec des mixins universels et des images clés (utils.scss) à tous les autres fichiers 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; } 
} 

Il est ok, tout fonctionne, mais il y a utils.scss fois de plus dans le fichier résultat:

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

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

Lorsque utils.scss a 100 kB (avec compress) et j'ai 20 fichiers dans lequel est utils.scss IMPORTES, il y a 1,9 Mo de code redondant, car il y a utils.scss 20 fois.

Answer 1

Prenez utils sur les fichiers individuels .scss et placez-les dans le fichier main.scss avant les autres fichiers.

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