sass - 保护不编译所有 SCSS 样式表

Question

当您有一个使用 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，则不会。

有一些解决方法吗？我需要配置一些额外的东西吗？

Answer 1

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

• https://github.com/hawx/guard-sass
• https://github.com/guard/guard-compass

我会选择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应该已经正确处理了你的案子。