將多個 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 Compiler，這將非常簡單。

1. 確保保存以下划線開頭的 sass/scss 文件，例如：_variables.scss、_mixin.scss。

2. @import 到你要編譯的主 style.scss 文件中。 例如：

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

3. 差不多就是這樣，您已經將所有 .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";

輸出 = custom.css

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