Sass @import使用前导下划线

Question

据我所知，最好不使用前导下划线导入SASS / SCSS部分; e.g。

@import 'normalize-scss/normalize'; // this imports ./normalize-scss/_normalize.scss

我对书呆子完整性的问题是，如果文件是使用下划线导入的，是否存在问题？

@import 'normalize-scss/_normalize';

Answer 1

没有。如果您的文件是_foo.scss，只要您没有任何不明确的文件名（除非可能存在任何副作用），所有这些导入都会产生相同的结果：

@import "foo";
@import "foo.scss";
@import "_foo";
@import "_foo.scss";

具有相同名称但扩展名不同的文件

只有在同一搜索路径中同时包含_foo.scss和_foo.sass时，才需要进行扩展。如果您没有指定哪一个，您将收到以下错误：

    error sass/test.scss (Line 7: It's not clear which file to import for '@import "test/bar"'.
Candidates:
  test/_bar.sass
  test/_bar.scss
Please delete or rename all but one of these files.
)

具有相同名称的文件，但其中一个以下划线

作为前缀

如果你同时拥有foo.scss和_foo.scss，那么foo.scss将优先。如果你想要_foo.scss，你需要在你的import语句中添加下划线。

@import "test/_foo";

无论你的导入语句是什么样的，每次你保存时，Sass都会给你一个警告：

WARNING: In /path/to/test:
  There are multiple files that match the name "bar.scss":
    _bar.scss
    bar.scss

Answer 2

如果在文件名的开头添加下划线，Sass将不会编译它。因此，如果您不希望colors.scss编译为colors.css，请将文件命名为_colors.scss。以这种方式命名的文件在Sass术语中称为partials。

有关Sass中导入功能的更多信息，您可以找到here

Answer 3

@import 'normalize-scss/_normalize';

这只会将 _normalize.scss 文件视为非部分文件。

因此，如果您希望该文件成为部分文件。然后在实际文件名的前面添加另一个下划线。所以文件名将是 __normalize.scss.