SASS 在 CSS 生成中忽略 @import-ed 文件答案

【问题标题】：SASS ignores @import-ed file in CSS generationSASS 在 CSS 生成中忽略 @import-ed 文件
【发布时间】：2013-11-18 13:43:54
【问题描述】：

我不知道是 SASS 的错误还是功能。

比方说，我有这样的 test.scss 文件：

.test {
  margin: 0;
}

它被编译成test.css。很好。

我有另一个 test2.scss 有这样的代码：

.test2 {
padding: 0;
}

编译成test2.css。也不错。

但是，如果我在 test2.scss 中添加 @import "test";，那么 test.css 将停止编译。

Official documentation says:

如果您想要导入 SCSS 或 Sass 文件但不想编译为 CSS 文件，您可以在文件名的开头添加下划线。

据我所知，test.css 必须在任何情况下都可以编译。只能通过在 SCSS 文件名的开头添加下划线来禁用它的编译。

或者我误解了什么？请解释一下。

我的环境：Windows 7，css 文件由 PhpStorm 中的 File Watchers 编译，SASS 版本 - Media Mark (3.2.12)

更新 (20.11.13) 看来，这是 PhpStrom 的文件观察器的问题/更多信息可以在 this topic 找到。

【问题讨论】：

尝试通过将 test.scss 重命名为 _test.scss 来将其定义为部分。见：sass-lang.com/documentation/file.SASS_REFERENCE.html#import
@Jop 也试过这个，但没有任何改变。似乎，无论其名称如何，导入的文件总是被解释为部分文件。
我使用的是 sass 3.2.12，它编译了 @import 文件，所以应该是 File Watchers 的问题。但是你为什么要编译一个已经包含在另一个文件中的文件呢？你能解释一下你到底想做什么吗？
@AlexGuerrero 我们有一个产品下拉组件，它有自己的样式表 productDropdown.scss（编译为 CSS）。此下拉列表包含在产品页面中（以编程方式），因此 product.scss 导入 productDropdown.scss。但是我们在CMS中工作，编辑器可以在网站的任何地方添加下拉组件，所以我们需要动态包含下拉的css文件，因此它需要单独存在。至于 File Watchers，我明天会尝试 SASS 的 native watcher 并在这里报告结果。谢谢。
@AlexGuerrero 我已经进行了测试，看来 PhpStorm 的文件观察器存在一些问题。本机 SASS 观察程序编译这两个文件。谢谢你的提示！

标签： sass phpstorm

【解决方案1】：

感谢@AlexGuerrero 的建议，Andriy Bazanov答案问题终于解决了。

原因在于 PhpStorm 的 SCSS File Watcher 设置“仅跟踪根文件”。

Help of PhpStorm says:

当对文件调用 File Watcher 时，PhpStorm 会检测到所有包含此文件的文件。对于这些文件中的每一个，在其反过来，PhpStorm 再次检测包含它的文件。这递归重复操作，直到 PhpStorm 到达文件不包括在指定范围内的任何地方。这些文件被称为根文件（不要与内容根混淆）。

选中此复选框后，文件观察器仅针对根文件运行。

清除该复选框后，文件观察器将针对调用它的文件以及调用它的所有文件运行此文件被递归地包含在指定范围内。

在我的例子中，这个复选框被选中，所以我取消选中它，现在我得到了预期的行为。

【讨论】：