Use node-sass to preprocess your ember-cli app's files, with support for source maps and include paths.
npm install --save-dev ember-cli-sass
By default this addon will compile app/styles/app.scss
into dist/assets/app.css
and produce a source map for your delectation.
Or, if you want more control then you can specify options using the sassOptions
config property:
var app = new EmberApp({
...
sassOptions: {...}
});
.inputFile
: the input SASS file, defaults toapp.scss
.outputFile
: the output CSS file, defaults toapp.css
.includePaths
: an array of include paths.sourceMap
: controls whether to generate sourceMaps, defaults totrue
in development. The sourceMap file will be saved tooptions.outputFile + '.map'
The following example assumes your bower packages are installed into bower_components/
.
Install some SASS:
bower install --save foundation
Specify some include paths in Brocfile.js:
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
}
});
Import some deps into your app.scss:
@import 'foundation'; /* import everything */
/* or just import the bits you need: @import 'foundation/functions'; */
Be aware that there are some issues with source maps in broccoli-sass. The source maps it generates will at least show you the source file names and line number in your dev tools. When we've got a better solution in broccoli-sass you'll be able to click through to view and update the SASS files in the dev tools \o/.