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
or app/styles/app.sass
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 in the Brocfile:
var app = new EmberApp({
sassOptions: {...}
});
.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'
.extension
: optionally specify the file extension for the input files. If not specified then the filesystem is checked for the existence of anscss
orsass
file. Please note that, at this point in time, you must specify this option when using ember-cli-sass inside an addon- See broccoli-sass-source-maps for a list of other supported options.
If you need to process multiple files, it can be done by configuring the output paths in your Brocfile.js
:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'app': '/assets/application-name.css',
'themes/alpha': '/assets/themes/alpha.css'
}
}
}
});
In a previous versions the sassOptions
config property was incorrectly moved to the config/environment.js
file. This usage is deprecated, and you should specify the config in the Brocfile.
If you were using the .inputFile
and .outputFile
options, this is now done by configuring the output paths in your Brocfile.js
The following example assumes your bower packages are installed into bower_components/
.
Install some SASS:
bower install --save foundation
Specify some include paths in your Brocfile:
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'; */
To compile SASS within an ember-cli addon, there are a few additional steps:
-
Include your styles in
addon/styles/addon.scss
. -
Ensure you've installed
ember-cli-sass
underdependencies
in yourpackage.json
. -
Define an
included
function in your app:// in your index.js module.exports = { name: 'my-addon', included: function(app) { this._super.included(app); } };
If you omit this step, it will throw the following error:
Cannot read property 'sassOptions' of undefined TypeError: Cannot read property 'sassOptions' of undefined at Class.module.exports.sassOptions (~/my-plugin/node_modules/ember-cli-sass/index.js:43:48)
-
Make sure your dummy app contains an
app.scss
-
If you run
ember build dist
, your styles fromaddon/styles/addon.scss
should appear correctly indist/assets/vendor.css
For an example of an addon that does this correctly, see ember-cli-notifications
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/.