sass - 将多个目录中的多个 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
我遇到的唯一问题是它不会只在公共(public)场合创建 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 或输出路径。