SASS将utils导入所有文件，但只导入一次

Question

有没有办法@import一些带有通用mixins和关键帧（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冗余代码，因为有utils.scss 20次

Answer 1

从utils个文件中取出.scss，然后将其放在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文件声明其自己的依赖性。这样可以促进封装，并在需要时允许模块独立。