2015-03-08 7 views
7

Ich benutze die pod-Struktur von ember-cli, um JS und Vorlagen nach Ressourcen zu gruppieren, was eine enorme Verbesserung darstellt. Die letzte Spur der Ressourcen-bezogenen Logik sind die CSS (SCSS) -Dateien, die bereits entlang pod-artiger Linien zerlegt sind, aber immer noch in app/styles stecken bleiben.ember-cli: Wie platziere ich CSS in Pods?

Meine Idee ist es, die CSS-Dateien in jeden Pod unter dem Namen style.css zu verschieben. Meine Frage ist, wie man SASS (über @import) Direktiven und/oder Broccoli anweist, nach den SCSS-Dateien innerhalb der Pods zu suchen (könnte mehrere Ebenen tief sein) und diese in App-Name .css kompilieren.

Antwort

3

Erik Bryn hat gerade seine ember-cli addon bei EmberConf angekündigt, die genau das tut. Leider unterstützt es CSS-Präprozessoren noch nicht, also bis sein Addon weiter ist, müssen Sie mit der Art der Organisation von Stilen umgehen ...

+0

Danke für diesen Zeiger, ich bin mir sicher, dass das ein nützliches Add-on sein wird. Persönlich möchte ich kein neues Ding installieren, nur um eine Datei an Ort und Stelle zu halten A statt Stelle B, die mit meinem CSS muckelt, benutzt noch eine spezielle Syntax mit '&', fügt seltsame Zahlen zu meinen Klassen hinzu verändert magisch die Art und Weise, wie Komponenten erweitert werden, kann in Versionskonflikte mit anderen Dings geraten, funktioniert nur mit Ember-Komponenten und bietet mehr Möglichkeiten für komische Brokkoli-Bugs. Irgendwann hoffe ich, dass Ember mehr Einfachheit statt mehr Komplexität anstrebt. –

+0

Ich weiß, was Sie meinen, und [Arbeit ist auf dem Weg] (https://github.com/ember-cli/ember-cli/pull/3402), um Spalten in Pods weniger schmerzhaft zu machen ... –

+0

Glücklich zu sagen wir, dass ich ember-component-css (link in answer) erfolgreich verwendet habe, um .less styles für Komponenten im pod mode nahtlos vorzuverarbeiten. Es war ziemlich schmerzlos – shane

1

Wir erstellen ein nettes Addon ember-cli-sass-pods, das ember-cli-sass verwendet (wird automatisch installiert) und ermöglicht es Ihnen, Ihre Style-Scss-Dateien zu generieren und in Ihre Pods-Verzeichnisse einzufügen.

zum Beispiel:

app/login 
app/login/route.js 
app/login/template.hbs 
app/login/style.scss 

oder eine Komponente:

app/components/login-box 
app/components/login-box/component.js 
app/components/login-box/template.hbs 
app/components/login-box/style.scss 

Gerade

ember g Stil [Pfad] laufen -p

Viel Spaß!

Verwandte Themen