保护不编译所有 SCSS 样式表答案

【问题标题】：Guard not compiling all the SCSS stylesheets保护不编译所有 SCSS 样式表
【发布时间】：2021-12-01 23:42:17
【问题描述】：

如果您有一个使用 sass @import 导入其他样式表的包装样式表，并且当使用 guard 来监视更改时，如果您只更改其中一个导入的文件，它不会自动编译该包装样式表。示例：

/* This is viewports.scss, which must compile into viewports.css */
@media only screen and (min-width: 480px) {
    @import "480.scss";
}

@media only screen and (min-width: 768px) {
    @import "768.scss";
}

@media only screen and (min-width: 1024px) {
    @import "1024.scss";
}

当修改例如 480up.scss 时，它会按预期编译成 480up.css，但 Guard 没有将其导入 viewports.css，似乎没有识别依赖关系。当您想在一个编译的 css 中实现响应式，但在单独的 scss 文件中编写代码时，这种用法很重要。

如果您只使用 sass 命令，您将获得预期的行为，如果您使用 Guard，则不会。

有解决办法吗？我需要配置什么额外的东西？

【问题讨论】：

标签： sass guard-sass

【解决方案1】：

Guard 对文件的依赖关系一无所知，只是提供了轻松处理文件系统修改事件的基础。我看到 sass 有两个 Guard 插件：

我会选择guard-sass，因为它得到了积极的维护。当我阅读文档时，我看到了

:smart_partials => true # Causes guard-sass to do dependency resolution and only
                        # recompile the files that need it when you update partials.
                        # If not on, then guard-sass will update all files when a
                        # partial is changed.
                        # default: false

所以看起来guard-sass 应该已经正确处理了您的案件。

【讨论】：

guard-sass 已存档