ember-cssnext
Use cssnext to preprocess your ember-cli app's css.
Installation
ember install ember-cssnext
Usage
By default, this addon will compile app/styles/app.css
into dist/assets/app.css
.
Additional options can be specified using the cssnextOptions
config property in ember-cli-build.js
:
var app = new EmberApp({
cssnextOptions: {...}
})
Configuring Input/Output Paths
You can configure the input and output files using ember-cli's outputPaths
option in ember-cli-build.js
:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'app': '/assets/my-project.css'
}
}
}
});
You can also configure multiple input/output paths to generate multiple css files:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'theme-orange': '/assets/theme-orange.css',
'theme-purple': '/assets/theme-purple.css'
}
}
}
});
Usage in Addons
You can also use this to precompile cssnext files in an addon. By default, this
will compile addon/styles/addon.css
into css that will be merged into the
host app's css. (requires ember-cli >= 0.2.0):
- Install
ember-cssnext
in your addon'spackage.json
underdependencies
- Create your addon less file at
addon/styles/addon.css
(or where you specify in your options) - To run the addon's dummy app, be sure to create
tests/dummy/app/styles/app.css
if it doesn't exist
References
- Code largely based on: ember-cli-less. Credits to the author.
- broccoli-cssnext-single
- cssnext