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

Question

Я пытаюсь использовать 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 тыс. строк. Так что что-то явно не так.

Спасибо

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

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