An Ember CLI addon which allows you to specify CSS inside of component pod directories
Last updated 5 years ago by mnitchie .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-component-css-withbp 
SYNC missed versions from official npm registry.

ember-component-css Build Status

An Ember CLI addon which allows you to specify CSS inside of component pod directories

The announcement from EmberConf 2015 CSS is hard - EmberConf 2015


ember install ember-component-css


This addon allows you to specify a styles.css file inside of your component's pod folder (app/my-component/styles.css).

Rules defined inside of these styles.css files will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's classNames property. This enables you to worry less about rules clashing across component styles.

For example, given this app/my-component/styles.css file:

& {
  padding: 2px;
.urgent {
  color: red;

Your generated CSS output will look something like:

.my-component-a34fba {
  padding: 2px;
.my-component-a34fba .urgent {
  color: red;

A typical component invocation that looks like this:


will generated markup like:

<div class="my-component-a34fba"></div>

With Preprocessors

To use this addon with another preprocessor (such as Sass or Less), simply import pod-styles into your base app stylesheet.

For example, if you're using Sass:

// app/styles/app.scss
@import "pod-styles";

And that is it! The pod-styles file is generated during the build and will then be pulled into your other stylesheet to be processed like normal.

Approved preprocessors:

Current Tags

  • 0.1.9                                ...           latest (5 years ago)

4 Versions

  • 0.1.9                                ...           5 years ago
  • 0.1.8                                ...           5 years ago
  • 0.1.7                                ...           5 years ago
  • 0.1.6                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependents (0)

Copyright 2014 - 2017 © taobao.org |