ember-cli-aphrodite
Co-locate your styles with your Ember components, using aphrodite.
Installation
ember install ember-cli-aphrodite
Usage
In your component, define styles in a StyleSheet
, and then reference them in your template via the provided {{css}}
helper:
;;; ;
To learn more about aphrodite
and how to use it, visit the aphrodite GitHub page.
For Sass-style helpers, take a look at ember-cli-polished-shim.
!important
Disabling By default, Aphrodite will append !important
to all generated styles, which is intended to make integrating with a pre-existing codebase easier. You can opt out of this behavior by modifying your ember-cli-build.js
file like so:
var app = defaults 'ember-cli-aphrodite': // Prevent Aphrodite from appending all styles with !important important: false ;
Note that while the Aphrodite README instructs you to import from aphrodite/no-important
, this addon simply changes which version of the Aphrodite library is exposed to your app, so you'll always import from aphrodite
.
Demo
Basic example from the Aphrodite README: https://ember-twiddle.com/81701ffed95b8ee19930b287fbefcca8