Broccoli.js и Ember-CLI: попытка заставить компилятор SCSS работать

Я пытаюсь использовать Foundation с приложением Ember-CLI и хочу скомпилировать все SCSS с помощью broccoli-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,4 тыс. строк. Так что что-то явно не так.

Спасибо


javascript ember.js broccolijs build-process
person JDillon522    schedule 08.12.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Итак, вот пример:

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 хочет проверить зависимости (через импорт), он будет искать в дереве, которое вы передали в качестве первого параметра.

Надеюсь это поможет.

person Julien    schedule 09.12.2014