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.


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


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!

链接地址: http://www.djcxy.com/p/84104.html

上一篇: 如何在java中将float转换为double?

下一篇: cli:如何在CSS中放置CSS