如何使用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

我觉得通配符解决方案不会在所有的工作。 你有没有试图导入你的文件依赖关系，@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与他们的依赖性风格。

这样你就可以改进你的代码并从依赖关系中获得更好的控制。

Answer 2

您可以像下面这样提供文件云块：

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

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

@import 'home.scss'; 

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import