0

I'm trying to use Foundation with an Ember-CLI app and I want to compile all the SCSS with broccoli-scss. For the life of me I cant get it to work.

I have Foundation in my bower components so heres what I've tried, modled off of the broccoli sample app:

// 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();

And...

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

I'n the browser I'm only getting about 800 lines of compiled CSS, where the standard foundation.css is about 4.4k lines long. So something is obviously wrong.

Thanks

4

1 に答える 1

0

以下に例を示します。

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')

最初の選択ファイルがすべてのアプリ スタイルのツリーを作成することがわかります。2 番目の選択ファイルは、ライブラリ スタイルのツリーを作成します (この場合、これは基盤になるはずです)。スタイル ライブラリ (この場合は material-ui) に一致する宛先ディレクトリが必要です。これは、less/sass ファイルのインポートに使用されます。

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

グローバル パスを介して material-ui ファイルを参照していないことがわかりますが、以前に使用した destDir 名に基づいています。

compileLess への呼び出し (例では compileSass と同じ) は、less/sass 依存関係の完全なツリーを最初のパラメーターとして受け取り、2 番目のパラメーターはスタイルのメイン ファイルで、3 番目は出力ファイルです。

less/sass が (インポートを介して) 依存関係を確認したい場合、最初のパラメーターとして渡されたツリーを調べます。

お役に立てれば。

于 2014-12-09T15:14:00.670 に答える