将多个 SCSS/SASS 文件合并为一个 CSS 文件？

Question

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

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

然后运行以下代码：

sass --watch style.scss:style.css

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

Answer 1

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

样式.scss：

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

并且做：

sass --watch .

它将把目录下的所有文件编译为.css；忽略名称以

开头的文件。

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

也可以输出到其他目录：

sass --watch .:output_dir/

Answer 2

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

sass --watch application/sass:public/stylesheets

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

Answer 3

我进行了一次非常疯狂的谷歌搜索，试图解决这个问题。
事实证明，如果您在 VS Code 上使用 Rictwick Live Sass 编译器，这非常简单。

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

Answer 4

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

例如：

_variable.scss =

$primary:#000

_header.scss =

header {color:$primary;}

_footer.scss =

footer {background:$primary}

自定义.scss：

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

输出=自定义.css

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

Answer 5

水源 → 加水站 → 消费者 | | | 资源使用补充过程补充使用（水）（可重复使用的瓶子）（减少浪费）