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

【问题标题】：How to compile all SASS files in a directory with Elixir?如何使用 Elixir 编译目录中的所有 SASS 文件？
【发布时间】：2016-06-15 17:54:36
【问题描述】：

我正在使用 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

【问题讨论】：

【解决方案1】：

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

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

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

@import 'home.scss';

【讨论】：

如果我有很多文件，我不想显式添加它们。或者每次创建新文件时都这样做。这个想法是使用类似mix.sass(*)
问题是有时您需要明确指定文件以确保它们包含在正确的顺序中。看看bootstrap是怎么做的，例如github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/…

【解决方案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 及其依赖样式。

这样您将改进代码并更好地控制依赖项。

【讨论】：