Compile multiple SASS files in multiple directories, into multiple CSS files in a separate, single directory

Question

I need to compile multiple sass files in one directory into multiple corresponding css files in another directory. Eg:

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

Here is the command I am using:

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

Prior to attempting this, I was compiling all .scss files in place using just ./src/*/*.scss, and was getting the corresponding .css files in their respective directories. Trying to dump these in a different directory, however, is not working. What is happening instead is that one of the .scss files imports a .scss partial an import statement into the .scss file itself, a .scss.map file is created, and nothing else happens after that.

Does SASS even have this capability? I've tried different variations of the above command and occasionally I'll see an error saying that 'public' is a directory, which leads me to believe SASS doesn't allow a directory as the output. In fact, the documentation only provides a single output file as the example for compiling SASS (i.e. sass input.scss output.css).

I'm using NPM scripts as a build tool so please no Grunt, Gulp, etc.

*One other thing to note. I just tried using sass --watch instead of the normal compile command, and it sort of does what I need it to:

sass --watch src:public

The only issue I'm having with this is that it does not create only css files in public. Instead it creates a folder and a .css and .css.map file in the folder. It seems SCSS will add a path for each .scss file respective to the relative path traversed by watch. This solution would be ideal if it would not create this extra folder.

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。）