Comment ajouter broccoli-compass à ember-cli v0.0.28 ?

Question

J'aimerais pouvoir utiliser Compass pour prétraiter mon SASS en CSS de manière braise-cli projet.

Faire cela avec broccoli-sass est trivial, comme bower install broccoli-sass C'est tout ce qui est nécessaire, car le support est déjà intégré.

Faire cela avec broccoli-compass cependant, cela s'est avéré plutôt délicat...comment ?

---

Détails:

Cette question a déjà été posée, pour ember-cli v0.0.23;Et sa réponse semble être obsolète - le principal problème semble être qu'Ember-Cli résume beaucoup de chosesBrocfile.js, et le place dans un autre fichier, preprocessor.js, utilisant un Registry, et donc la solution serait différente, à une recherche standard Brocfile.js

---

Mise à jour:

Cette question a été répondue par @saygun, et la solution permet d'utiliser broccoli-compass pour compiler SCSS --> CSS.Il y a cependant quelques mises en garde :

• Problème mineur:L'existant minifyCss le préprocesseur dans meber-cli ne fonctionnera pas.Vous devrez configurer Compass pour réduire son propre CSS.
• Problème majeur:Si les fichiers SCSS font référence à des images, les fichiers CSS générés contiennent des liens vers des images dont les chemins se trouvent dans les dossiers d'arborescence temporaire créés par Broccoli.Je ne sais pas comment contourner ce problème et j'ai posé une question complémentaire : Comment générer des sprites d'image dans ember-cli à l'aide de la boussole ?

Answer 1

tu dois installer broccoli-compass:

npm install broccoli-compass --save-dev

et vous devez installer Ruby Gem sass-css-importer:

gem install sass-css-importer --pre

puis dans votre fichier broc, faites ceci :

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

J'ai récemment publié ember-cli-compass-compilateur qui est un module complémentaire ember-cli pour les nouvelles applications ember-cli (>= 0.0.37).

Installez simplement à l'aide de la commande :

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

Aucune autre configuration n'est nécessaire, elle convertit app/styles/appname.scss à appname.css correctement.Comme son nom l'indique, il permet d'utiliser Boussole en plus d'être insolent aussi.