Run the following commands:
gem install --pre compass sass-css-importer
npm install --save-dev broccoli-static-compiler broccoli-merge-trees broccoli-compass
(This assumes that you already have Ruby and NodeJs installed)
Then add the contents of snippet-add-broccoli-compass-to-ember-cli-app.js
to your Brocfile.js
,
right after var app = new EmberApp({
, for example:
var app = new EmberApp({
name: require('./package.json').name,
minifyCSS: {
enabled: true,
options: {}
},
getEnvJSON: require('./config/environment')
});
var brocStaticCompiler = require('broccoli-static-compiler');
...
Lastly, you must rename app/styles/app.scss
to whatever your app name indicates,
as compass does not do this additional step for you:
mv app/styles/app.scss app/styles/foobarapp.scss
Thanks goes to @saygun for his answer on Stackoverflow.
Note that this does not work together with minifyCss
, and the production builds will get the full/ verbose CSS output.
I needed to install a different version of the compass gem to get this to work (--pre gets you an alpha that will hang because the command line option for project-type has changed to app).
$ gem install compass
should get you 0.12.6 which works with the setup above