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.
Not minifying in prod seems like a deal-breaker, no?