Comment générer des sprites d'images dans ember-cli en utilisant la boussole ?

Question

Mise à jour - 20140614 :

Après n'avoir obtenu aucune réponse à cette question, ni sur github, j'ai décidé de trouver ma propre solution au problème. J'utilisais Compass pour un certain nombre de choses, mais son utilité principale était sa capacité à générer des sprites d'images. La plupart des autres choses pouvaient être réalisées en utilisant du SCSS pur.

Ainsi, j'ai écrit brocoli-sprite . Ceci, utilisé en conjonction avec le support intégré d'ember-cli pour SCSS en utilisant brocoli-sass , a su répondre à mes besoins.

Vous pouvez Pour en savoir plus sur le processus, cliquez ici .

Maintenant, je ne suis donc plus intéressé par l'intégration de compass dans mon application ember-cli. Comme ma solution ne répond pas directement à la question (car elle n'utilise pas compass), je considère que cette question sans réponse . Puisque cette question pourrait encore profiter à d'autres membres de la communauté qui le souhaitent, je laisse cette question ouverte, et j'honorerai toujours la prime !

Mise à jour - 20140620 :

La prime a expiré.

---

Question originale :

Dans un ember-cli app, en utilisant brocoli-compas , comment le configurer pour que le CSS généré référence correctement les chemins des fichiers d'image, y compris les chemins des fichiers d'image générés ?

En utilisant le compas, le SCSS suivant :

@import"icon/*.png";
@include all-icon-sprites;

générera un seul .png avec toutes les images du fichier icon et CSS pour l'affichage de chacun d'eux.

J'aimerais pouvoir faire la même chose via compass dans ember-cli, qui utilise brocoli pour constituer son portefeuille d'actifs.

• Doit fonctionner dans ember-cli - c'est-à-dire qu'il doit être construit lorsque ember serve ou ember build est lancé.
• Doit utiliser compass pour générer des sprites d'images à partir d'un dossier d'images
• Les images générées doivent être copiées dans le dossier "assets".
• Le CSS généré doit pointer vers les images situées dans le dossier des actifs, et non vers un dossier temporaire de l'arborescence.

---

Ce que j'ai tenté jusqu'à présent :

#1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Quand je fais ça, le compass échoue car elle ne peut pas localiser les fichiers images dans l'arbre.

#2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

Juste pour essayer, je copie les fichiers images dans le répertoire styles. Cette fois, la commande compass réussit, mais, le CSS généré fait référence à des fichiers images qui n'existent pas. Les images générées ne semblent pas être copiées dans le dossier assets comme prévu ( ni ailleurs d'ailleurs) :

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

---

Détails :

SCSS que j'aimerais pouvoir compiler (pour la génération de sprites) :

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";

---

Answer 1

Je pensais que cela serait résolu en utilisant un addon ember et un hook postprocess, j'ai publié un addon,

Pour l'installer, exécutez : npm install ember-cli-compass --save-dev dans votre projet.

Configurez dans votre Brocfile.js .

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    compass: {
        outputStyle: 'expanded',
        relativeAssets: false,
        sassDir: 'assets',
        imagesDir: 'images',
        cssDir: 'assets'
    }
});

module.exports = app.toTree();

Cela semble faire ce que vous voulez mais je ne suis pas sûr. J'ai également dû modifier public/images à juste images parce que public/images copie dans le dossier dist/images . Peut-être que c'est le problème et que vous n'avez pas besoin d'un addon.

J'espère que cela résoudra votre problème.