许多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文件中的更改，并更新相关文件。

style.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编译器，则非常简单。

1. 确保以下划线开头保存sass / scss文件，例如：_variables.scss，_mixin.scss。

2. @@将它们导入到要编译的main style.scss文件中。例如：

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

3. 仅此而已，您已经将所有.scss文件编译为一个CSS文件。

Answer 4

只想添加， 您也可以从其他文件中调用Variables（$）和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;}