多个 SCSS/SASS 文件到一个 CSS 文件？答案

【问题标题】：Many SCSS/SASS files to one CSS file?多个 SCSS/SASS 文件到一个 CSS 文件？
【发布时间】：2011-11-10 13:40:33
【问题描述】：

是否可以让 sass 监听一个有很多 sass 文件的目录并生成一个 CSS 文件？我找到了一种方法，将许多 sass 文件包含在一个文件中（style.scss）：

@import "scss/header";
@import "scss/footer";

然后运行以下代码：

sass --watch style.scss:style.css

但问题是我必须在生成新的 CSS 文件之前更改该文件。

【问题讨论】：

标签： html css sass

【解决方案1】：

你可以告诉 SASS 监视整个文件夹：

sass --watch application/sass:public/stylesheets

如果您导入所有部分文件，这应该会生成一个文件。每次编辑文件夹中的文件时，都会自动生成 CSS 文件。

【讨论】：

可以，这两种解决方案都很好。但我的目标是总共只有一个 CSS 文件，并且包含 _ 和一个包含其他所有内容的 scss 文件，这对我来说是最好的解决方案。感谢您的回答，在使用 sass 2 天后，我真的很喜欢它的所有功能！

【解决方案2】：

如果你观察目录，sass 将能够注意到 @imported 文件的变化，并更新依赖文件。

style.scss：

@import "header";
@import "footer";

然后做：

sass --watch .

它将目录中的所有文件编译为.css；忽略名称以 _ 开头的文件。

我修改_header.scss或_footer.scss，如果也会更新style.scss。

你也可以在其他目录输出：

sass --watch .:output_dir/

【讨论】：

您能澄清一下吗？ “页眉”和“页脚”是 header.scss 吗？还是 header.css？它们是在子文件夹中还是与 screen.scss 位于同一文件夹中？
如果部分在不同的文件夹中怎么办？我有这种情况并且无法移动我的 css 文件，因为在这种情况下我必须进行大量更改。是否仍然可以更改部分内容，然后创建新的 css 主文件？
对我有帮助，谢谢
这里远射，我知道这个答案比泥土更古老，但是否有任何更新不会创建单独的.css？它将写入您的单个 .css 文件非常棒，但它还会在此过程中创建一个新的 .css 文件。

【解决方案3】：

只是想补充一下，您还可以从其他文件中调用变量 ($) 和 Mixins。

例如：

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = @987654323 @

custom.scss：

@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";

输出 = custom.css

header {color:#000;}
footer {background:#000;}

【讨论】：

【解决方案4】：

我正忙着在谷歌上搜索，试图解决这个问题。
如果您在 VS Code 上使用 Rictwick Live Sass 编译器，结果会非常简单。

确保保存以下划线开头的 sass/scss 文件，例如：_variables.scss、_mixin.scss。
@import 到你要编译的主 style.scss 文件中。例如：
```
@import "_mixins";
@import "_variables";
```
差不多就是这样，您已将所有 .scss 文件编译成一个 CSS 文件。

【讨论】：