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下一篇: cli:如何在CSS中放置CSS