Jak dodać brokuły-kompas do ember-cli v0.0.28?

Question

Chciałbym móc użyć kompasu do wstępnego przetworzenia mojego SASS w CSS w projekcie ember-cli.

Robi to z broccoli-sass jest trywialne, jak bower install broccoli-sass jest wszystko, co jest wymagane, jako wsparcie dla niego jest już wbudowany.

Robi to z broccoli-compass jednak okazała się być dość trudne ... jak ?

---

Szczegóły:

To pytanie zostało zadane wcześniej, for ember-cli v0.0.23; i jego odpowiedź wydaje się być nieaktualna - Głównym problemem wydaje się być to, że ember-cli streszcza wiele rzeczy w Brocfile.js, i umieszcza je w innym pliku, preprocessor.js, używając Registry, a zatem rozwiązanie będzie inne, do standardu poszukuje Brocfile.js

---

Aktualizacja:

kwestia ta została asnwered przez @saygun, a rozwiązanie pozwala używać brokuły kompas skompilować SCSS -> CSS. Istnieje jednak kilka zastrzeżeń:

• Drobne wydanie: istniejący preprocesor minifyCss w meber-cli nie zadziała. Będziesz musiał skonfigurować kompas, aby zminimalizować własny CSS.
• Ważny problem: Jeśli obrazy referencyjne plików SCSS, wygenerowane pliki CSS zawierają łącza do obrazów, w których ścieżki znajdują się w tymczasowych katalogach drzewa utworzonych przez Broccoli. Nie jestem pewien, jak to obejść, i prosić o kontynuacji pytanie: How to generate image sprites in ember-cli using compass?

Answer 1

trzeba zainstalować broccoli-compass:

npm install broccoli-compass --save-dev 

i trzeba zainstalować ruby ​​gem sass-css-importer:

gem install sass-css-importer --pre 

następnie w brocfile to zrobić:

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

Niedawno opublikowałem ember-cli-compass-compiler, który jest dodatkiem ember-cli dla nowszych aplikacji ember-cli (> = 0.0.37).

Wystarczy zainstalować za pomocą polecenia: potrzebna jest

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

Żadna inna konfiguracja, konwertuje do appname.cssapp/styles/appname.scss poprawnie. Jak sama nazwa wskazuje, pozwala na użycie także Compass.