Geek Answers Handbook

Ember-cli: how to place CSS in containers

I use the ember-cli pod structure to group JS and templates by resources, which is a big improvement. The final remnant of the resource-related logic is CSS (SCSS) files, which are already broken down into similar lines but still stuck in app/styles .

My idea is to move the CSS files into each element called style.css . My question is how to specify SASS directives (via @import ) and / or Broccoli to look for SCSS files inside containers (maybe several levels) and compile them in appname.css.

+7
sass ember-cli broccolijs
source share
2 answers

Eric Brin has actually just announced his adber-click-addon at EmberConf, which does just that. Unfortunately, it does not yet support CSS preprocessors, so until its addon continues, you will have to do without a way to create styles ...

+3
source share

We create a nice ember-cli-sass-pods addon that uses ember-cli-sass (will be installed automatically) and allows you to create and put your scss files in your style in the directories of your containers.

eg:

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

or 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 it!

+1
source share

More articles:


All Articles