CODEWITHSUNDEEP
ember.jssassember-clibroccolijs
user663031
user663031

Reputation:

ember-cli: how to place CSS in pods

I'm using ember-cli's pod structure to group JS and templates by resource, which is a huge improvement. The last vestige of resource-related logic is the CSS (SCSS) files, which are already broken down along pod-like lines, but still stuck over in app/styles.

My idea is to move the CSS files into each pod, under the name style.css. My question is how to instruct SASS (via @import) directives, and/or Broccoli, to look for the SCSS files within the pods (could be several levels deep) and compile them into appname.css.

Upvotes: 7

Views: 1806

Answers (2)

justtal
justtal

Reputation: 800

We create a nice addon ember-cli-sass-pods that uses ember-cli-sass (will install automatically) and lets you to generate and put your style scss files into your pods directories.

for example:

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

or a component:

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

Just run

ember g style [path] -p

Enjoy!

Upvotes: 1

Lauren Elizabeth Tan
Lauren Elizabeth Tan

Reputation: 101

Erik Bryn actually just announced his ember-cli addon at EmberConf that does exactly that. Unfortunately it doesn't support CSS preprocessors yet, so until his addon is further along you'll have to make do with the non-pod way of organizing styles...

Upvotes: 3

Related Questions