7

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.

amenthes
  • 3,117
  • 1
  • 32
  • 38

2 Answers2

3

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...

Lauren Elizabeth Tan
  • 101
  • 1
  • 1
  • 5
  • Thanks for that pointer, I'm sure that will be a useful add-on. Personally, I don't want to install a new thingie just to be able to keep a file in place A instead of place B, which mucks with my CSS, uses yet another special syntax with `&`, adds weird numbers to my classes, magically changes the way components are expanded, may get into version conflicts with other thingies, only works with Ember components, and provides more opportunities for weird broccoli bugs, At some point I sure hope Ember heads toward more simplicity, instead of more complexity. –  Mar 09 '15 at 02:57
  • I know what you mean, and [work is on the way](https://github.com/ember-cli/ember-cli/pull/3402) to make splitting styles into pods less painful... – Lauren Elizabeth Tan Mar 09 '15 at 09:20
  • Happy to say that I succesfully used ember-component-css (link in answer) to seemlessly pre-process .less styles for components in pod mode. It was pretty painless – shane May 04 '17 at 16:56
1

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!

justtal
  • 800
  • 1
  • 7
  • 16