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