将多个目录中的多个 SASS 文件编译成单独的单个目录中的多个 CSS 文件

Question

我需要将一个目录下的多个sass文件编译成另一个目录下多个对应的css文件。例如：

src/folder1/file1.scss  --compiles to--  public/file1.css
src/folder2/file2.scss  --compiles to--  public/file2.css

这是我正在使用的命令：

./src/*/*.scss ./public

在尝试此操作之前，我仅使用 ./src/*/*.scss 编译所有 .scss 文件，并在它们各自的目录中获取相应的 .css 文件。但是，尝试将它们转储到不同的目录是行不通的。相反，其中一个 .scss 文件将一个 .scss 部分导入语句导入 .scss 文件本身，创建了一个 .scss.map 文件，之后没有其他任何事情发生。

SASS 甚至有这个能力吗？我尝试了上述命令的不同变体，偶尔我会看到一个错误，说“public”是一个目录，这让我相信 SASS 不允许将目录作为输出。实际上，文档只提供了一个输出文件作为编译 SASS 的示例（即 sass input.scss output.css）。

我使用 NPM 脚本作为构建工具，所以请不要使用 Grunt、Gulp 等。

*还有一点需要注意。我只是尝试使用sass --watch 而不是普通的编译命令，它可以满足我的需要：

sass --watch src:public

我遇到的唯一问题是它不会在公共场合创建 only css 文件。相反，它会在该文件夹中创建一个文件夹和一个 .css 和 .css.map 文件。似乎 SCSS 将为每个 .scss 文件添加一个与watch 遍历的相对路径相对应的路径。如果它不会创建这个额外的文件夹，这个解决方案将是理想的。

Answer 1

你可以通过指定多个 source:output 将多个 sass 文件编译成多个 css 文件，用空格分隔，如下所示：

sass --watch src/file1.scss:dist/file1.css src/file2.scss:dist/file2.css

您可以根据需要更改 src 或输出路径。

Answer 2

你必须告诉 sass watch 你希望它输出什么文件，就像这样：

sass --watch style.scss:style.css

您甚至可以将其设置为输出压缩的 css 文件（每个 css 都会自动生成 .map 文件）：

sass --watch style.scss:style.css --style compressed

我通常只看一个文件，但理论上你可以观看不同的 scss 文件并将它们编译为单独的 css 文件，不知道为什么要这样做？但可以做到。

对于任何要分组的内容，将相关文件导入一个 scss 文件，然后将其编译为一个文件，然后重复这些步骤。

（注意：我正在为 Node 中的上述命令运行 sass gem。）