SASS 将实用程序导入所有文件，但只有一次答案

【问题标题】：SASS import utils to all files, but only onceSASS 将实用程序导入所有文件，但只有一次
【发布时间】：2020-03-08 16:59:09
【问题描述】：

有什么方法可以将带有通用 mixins 和关键帧 (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 冗余代码，因为有 utils.scss 20 次。

【问题讨论】：

标签： import webpack sass

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：