Emberjs spezifische SCSS-Datei für meine Komponente

Question

Wir haben gerade angefangen, mit Emberjs zu arbeiten, und was ich möchte, ist eine neue benutzerdefinierte Komponente zu erstellen, die auf ihrem ist abgeschlossen. Das bedeutet, es hat eine eigene js-Datei, eine eigene Vorlagendatei und ein eigenes Styling. Die ersten beiden bekomme ich schon, wenn ich mit dem ember cli eine neue Komponente erzeuge. Der letzte, Styling, Ich habe nicht gefunden, wie ich eine CSS/SCSS-Datei erstellen kann, die nur geladen wird, wenn ich eine bestimmte Komponente lade. Gibt es so etwas?

Answer 1

ember-components-css scheint genau das zu tun, was Sie wollen. Sie können auch ember-css-modules ansehen.

Mit Ember-Komponenten-CSS können Sie folgendes tun:

app/my-component/styles.css 
& { // ampersand refers to the component itself (parent selector) 
    padding: 2px; 
} 
.urgent { 
    color: red; 
} 

und diese generiert:

.my-component-a34fba { 
    padding: 2px; 
} 
.my-component-a34fba .urgent { 
    color: red; 
} 

Das ist, was ich glaube, Sie wollen richtig?

Und Bonus können Sie Preprozessoren verwenden:

// app/styles/app.scss 
@import "pod-styles"; or 
// app/styles/app.less 
@import "pod-styles"; or 
// app/styles/app.styl 
@import 'pod-styles'