Como adicionar os brócolis-bússola para ember-cli v0.0.28?

Question

Eu gostaria de ser capaz de usar a bússola para pré-processar o meu SASS em CSS em um ember-cli projeto.

Fazer isso com o broccoli-sass é trivial, como bower install broccoli-sass é tudo o que é necessário, como o suporte para ele já está incorporado.

Fazer isso com o broccoli-compass no entanto, acabou por ser um pouco complicado...como?

---

Detalhes:

Esta pergunta foi feita anteriormente, para ember-cli v0.0.23;e a resposta parece estar desatualizado - O principal problema parece ser que ember-cli abstrai um monte de coisas emBrocfile.js, e coloca-lo em outro arquivo, preprocessor.js, usando um Registry, e , assim, a solução seria diferente, para um padrão de procura Brocfile.js

---

Atualização:

Esta questão tem sido asnwered por @saygun, e a solução permite o uso de brócolis-bússola para compilar ESCS --> CSS.No entanto, há algumas ressalvas:

• Pequeno problema:Existente minifyCss pré-processamento na meber-cli não vai funcionar.Você precisará configurar a bússola para comprimir o seu próprio CSS.
• Grande problema:Se a ESCS arquivos de imagens de referência, a geração de arquivos CSS conter links para imagens onde os caminhos estão dentro do temporário árvore de pastas criadas pelo Brócolis.Eu não tenho certeza de como contornar isso, e perguntaram a um acompanhamento pergunta: Como gerar imagem de sprites na brasa-cli utilizar a bússola?

Answer 1

você precisa instalar broccoli-compass:

npm install broccoli-compass --save-dev

e o que você precisa para instalar o ruby gem sass-css-importer:

gem install sass-css-importer --pre

em seguida, no seu brocfile fazer isso:

var compileCompass = require('broccoli-compass');

app.styles = function() {
  var vendor = this._processedVendorTree();
  var styles = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles'
  });

  var stylesAndVendor = mergeTrees([vendor, styles, 'public']);

  return compileCompass(stylesAndVendor, 'app' + '/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app' + '/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};

Answer 2

Recentemente eu publiquei ember-cli-bússola-compilador o que é um ember-cli addon para o mais recente ember-cli aplicações(>= 0.0.37).

Basta instalar usando o comando:

npm install --save-dev ember-cli-compass-compiler

Nenhuma outra configuração é necessária, ele converte app/styles/appname.scss para appname.css corretamente.Como o nome indica, permite a utilização de Bússola além sass bem.