多个 SCSS/SASS 文件如何合并成一个 CSS 文件？

Question

能否让sass监听一个包含多个sass文件的目录并生成一个CSS文件？我已经找到了一种方法，即将多个sass文件包含到一个文件(style.scss)中:

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

然后运行以下代码：

sass --watch style.scss:style.css

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

- voigtan

Answer 1

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

style.scss:

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

然后执行：

sass --watch .

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

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

您还可以输出到其他目录：

sass --watch .:output_dir/

- Arnaud Le Blanc

---

请问能否澄清一下？ "header" 和 "footer" 是指 header.scss 还是 header.css？它们是在子文件夹中还是与 screen.scss 在同一文件夹中？ - Alisso

如果局部文件在不同的文件夹中怎么办？我遇到了这种情况，不能移动我的CSS文件，因为那样我就必须做很多更改。是否仍然可以更改局部文件，然后创建一个新的CSS主文件？ - user2718671

帮助了我，谢谢。 - Dharam Mali

这里可能有点冒险，我知道这个答案老得不能再老了，但是有没有更新的内容可以避免它创建一个单独的 .css 文件呢？它可以写入你的单一 .css 文件，这很棒，但同时也会创建一个新的 .css 文件。 - Brandon Benefield

Answer 2

您可以使用以下命令告诉SASS监视整个文件夹：

```sass --watch folder_path```

sass --watch application/sass:public/stylesheets

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

- Luwe

---

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

Answer 3

我刚刚经历了一次疯狂的谷歌搜索之旅，试图解决这个问题。
原来如果你正在使用VS Code上的Rictwick Live Sass Compiler，这个问题就非常简单。

1. Make sure to save your sass/scss files starting with an underscore eg: _variables.scss, _mixin.scss.

2. @import them into the main style.scss file you want to compile. Eg:

   @import "_mixins";
   @import "_variables";
   

3. Pretty much that's it, you've compiled all your .scss files into a single CSS file.

- Jd Moneymaker

Answer 4

只是想补充一下，

您也可以从其他文件中调用变量（$）和混合（Mixins）。

例如：

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

custom.scss:

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

输出 = custom.css

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

- Dharam Mali