将多个目录中的多个 SASS 文件编译为单独的单个目录中的多个 CSS 文件 [英] Compile multiple SASS files in multiple directories, into multiple CSS files in a separate, single directory

问题描述

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

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

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

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.

SASS 有这种能力吗?我尝试了上述命令的不同变体，偶尔我会看到一个错误，指出public"是一个目录，这让我相信 SASS 不允许将目录作为输出.实际上，该文档仅提供了一个输出文件作为编译 SASS 的示例(即 sass input.scss output.css).

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).

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

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

*还有一点要注意.我只是尝试使用 sass --watch 而不是普通的编译命令，它有点像我需要的那样:

*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

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

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.

推荐答案

你可以通过指定多个 source:output 来将多个 sass 文件编译成多个 css 文件，如下所示:

You can compile multiple sass files into multiple css files by specifying multiple source:output separated by a space like this:

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

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

You can change the src or output paths as needed.

这篇关于将多个目录中的多个 SASS 文件编译为单独的单个目录中的多个 CSS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！