Use node-stylus to preprocess your ember-cli app's files, with support for sourceMaps and include paths.
This is essentially a fork-search-replace job of ember-cli-sass. Credits go to @aexmachina.
npm install --save-dev ember-cli-stylus
By default this addon will compile app/styles/app.styl
into dist/assets/app.css
and produce a sourceMap for your delectation.
Or, if you want more control then you can specify options using the stylusOptions
config property:
var app = new EmberApp({
...
stylusOptions: {...}
});
.inputFile
: the input Stylus file, defaults toapp.styl
.outputFile
: the output CSS file, defaults toapp.css
.includePaths
: an array of include paths.sourceMap
: controls sourcemap options, defaults toinclude: true
in development. The sourceMap file will be saved tooptions.outputFile + '.map'
.use
: array with stylus plugins, check stylus API
The following example assumes your bower packages are installed into bower_components/
.
Install some Stylus:
bower install --save foundation
Specify some include paths in Brocfile.js:
var app = new EmberApp({
stylusOptions: {
includePaths: [
'bower_components/foundation/styl'
]
}
});
Import some deps into your app.styl:
@import 'foundation'; /* import everything */
/* or just import the bits you need: @import 'foundation/functions'; */