CODEWITHSUNDEEP
javascriptember.jsember-cli
valanto
valanto

Reputation: 921

Emberjs specific SCSS file for my component

We just started working with Emberjs and what I would like is to create a new custom component which is complete on its on. This means it has its own js file, its own template file and its own styling. The first two I already get when I generate a new component with the ember cli. The last one, styling, I haven't found how I can create a CSS/SCSS file that is only loaded when I load a given component. Is there such a thing?

Upvotes: 1

Views: 402

Answers (1)

TameBadger
TameBadger

Reputation: 1590

ember-components-css seems to do exactly what you want. You can also have a look at ember-css-modules.

With Ember-components-css you'll be able to do the following:

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

and this will be generated:

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

Which is what I think you do want right ?

And bonus, you can use preprocessors:

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

Upvotes: 1

Related Questions