如何使用 Elixir 编译目录中的所有 SASS 个文件？

Question

我正在使用 elixir 编译我的 scss 文件。

假设这是我的文件夹结构：

- app.scss
- header.scss
- footer.scss
- home/
  - home1.scss
  - home2.scss

对于一个文件我可以使用 mix.sass('app.scss'); 但是如果对于我目录中的所有文件而不需要一个一个地添加它们呢？

我试过：

mix.sass('*.scss');
mix.sass('**/*.scss');
mix.sass(['*.scss']);
mix.sass(['**/*.scss']);

我唯一能得到的文件是 public/css/app.css

我怎样才能编译所有文件以获得如下内容：

- app.scss
- header.scss
- footer.scss
- home/
  - home1.scss
  - home2.scss

Answer 1

您可以将文件 glob 作为数组提供，如下所示：

mix.sass(['./app.scss', './home.scss'])

或者您可以在 elixir 中只导入一个 sass 文件，然后在该文件中使用 sass 导入指令来包含其余文件。

@import 'home.scss';

Answer 2

我认为通配符解决方案根本行不通。您是否尝试过使用 @import "file2" 导入您的文件依赖项，并且只处理这些文件？

假设： home1.scss

@import "../app"
@import "../header"
@import "../footer"
// home1 css

home2.scss

@import "./home1"
// home2 css

与：

mix.sass('home1.scss');
mix.sass('home2.scss');

您将仅生成 home1.css 和 home2.css 以及它们的依赖项样式。

通过这种方式，您可以改进代码并更好地控制依赖项。

How to compile all SASS files in a directory with Elixir?