css - 为什么我的 SASS @import 转到我的 CSS @import？

Question

例如，假设我有 main.css、main.sass、about.sass 和 contact.sass。

main.sass 应该有@import about.sass 和@import contact.sass。那么，在编译main.sass的时候，main.css应该有about.sass和contact.sass的所有内容。不是@import 的。

主.sass

@import 'tools/fonts' 
@import 'tools/normalize'
@import 'tools/grid'

现在，当它被转换为 main.min.css 时，它看起来与 main.sass 中的完全一样

@import url(tools/fonts.css);
@import url(tools/normalize.css);
@import url(1-tools/grid.css);

不应该没有@imports，只有组合的css代码吗？

Answer 1

您正在导入的文件没有以下划线开头的名称。如果文件以下划线开头，则 SASS 知道它是一个部分文件，并且应该包含在导入的任何地方。

如果文件名不以下划线开头，那么它将生成为它自己的 CSS 文件。

描述了此行为 here .

Partials

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do

@import "colors";

and _colors.scss would be imported.

Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss.