Broccoli.js和Ember-CLI：試圖使SCSS編譯器正常工作

Question

我正在嘗試將Foundation與Ember-CLI應用程序一起使用，並且希望使用西蘭花-scss編譯所有SCSS。 為了我的一生，我無法使它運轉。

我的涼亭組件中裝有Foundation，因此這是我嘗試過的，從西蘭花樣品應用程序中摘下來的內容：

// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler')
var compileSass = require('broccoli-sass');

var app = new EmberApp();

var styles = 'styles'
styles = pickFiles(styles, {
  srcDir: './bower_components/foundation/scss',
  destDir: './app/styles'
});

var appsScss = compileSass([styles], './app/styles/app.scss', './app/styles/app.css');

module.exports = app.toTree();

和...

// app/styles/app.scss
@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";

在瀏覽器中，我只能得到約800行的已編譯CSS，其中標准的foundation.css長約4.4k行。 因此，顯然有問題。

謝謝

Answer 1

所以這是一個例子：

var tree = pickFiles("app/styles", {
  srcDir: '/',
  destDir: 'mui'
});
var muiTree = pickFiles("material-ui/src/less", {
  srcDir: '/',
  destDir: 'material-ui'
});
return compileLess(mergeTrees([tree, muiTree]), 'mui/app.less', 'assets/app.css')

因此您可以看到第一個選擇文件為所有應用程序樣式創建了一個樹。 第二個選擇文件為庫樣式創建樹（在您的情況下，這應該是基礎）。 您應該有一個與樣式庫（在本例中為material-ui）匹配的目標目錄。 這將用於您的less / sass文件中的導入：

@import "material-ui/scaffolding.less";
@import "material-ui/components.less";

您會看到我沒有通過全局路徑引用material-ui文件，而是基於我以前使用的destDir名稱。

對compileLess的調用（與您的示例中的compileSass相同），將具有less / sass依賴關系的完整樹作為第一個參數，第二個參數是樣式的主文件，第三個參數是輸出文件。

當less / sass要檢查依賴關系（通過導入）時，它將在您作為第一個參數傳遞的樹中查找。

希望這可以幫助。