SASS 导入适用于所有文件，但只能导入一次

Question

有没有办法将一些具有通用混音和关键帧(utils.scss)的文件@import到所有其他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

从单个.scss文件中取出utils，并将其放在main.scss文件中，然后再放入其他文件。

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

Answer 2

解决方案：https://github.com/wilsonpage/sass-import-once

当包含在 SASS 模块中时，如果 @import 在其他地方调用样式，sass-import-once 将防止样式被复制。这很酷，因为它允许每个 SASS 文件声明自己的依赖项。这促进了封装，并允许模块在需要时独立。