Bitters + Emberjs

Design
1

Hey guys,

Any good resources on using Bitters with Ember? Hopefully a codebase with some of the defaults changed, using some of the mixins and functions…

I’ve installed it on this project and got the defaults working, which is already a great improvement, but am lost on how to add and change stuff from there, being very out of date with css and a newbie with sass.

Anything I add to app.scss seems to make ember serve / build barf with a segmentation fault, even just basic styles.

2

Hi @oliverbarnes, it seems your project is not actually compiling changes to scss.

I am far from being an expert with using Ember and the conventions required by ember-cli, but I believe bitters should be installed to the vendor dir and imported from app.scss. Then you probably need to add an output tree for this to work (I am referring to the docs in broccoli-sass)

Hope this helps :smile:

3

Thanks @pedromoreira that does help. One thing though, I did manage to get a change I made to render - I changed the button color at app/styles/bitters/_button.scss. So changes to the bitters files themselves get compiled but not whatever is on app.scss? The defaults are getting compiled as well…

Vendor does seem the right place for it though, going to try moving it there and see if the segfault goes away

4

@pedromoreira Does this look right? Still getting segfault

var compileSass = require('broccoli-sass');

var appCss = compileSass(['vendor/bitters'], 'app/styles/app.scss', 'assets/app.css');
5

Hi @oliverbarnes, I’ve gotten this to work but following a slightly different route.

You can find a repo here:

The Play-by-Play:

  1. Create new app with ember-cli ember new whateves

  2. Install ember-cli-sass npm install --save-dev ember-cli-sass

  3. Install node-neat npm install --save-dev node-neat

  4. Configure sassOptions:

var app = new EmberApp({ sassOptions: { includePaths: require('node-neat').with('app/assets/bitters') } });
5. This gives away the last step :slight_smile: Install the Bitters files in app/assets/bitters. Just cd into app/assets and run bitters install
6. Declare your imports in app.scss:

@import "bourbon"; @import "neat-helpers"; @import "neat"; @import "bitters";

And you’re set. You can now use the thoughtbot stack for front-end happiness :slight_smile:

6

@pedromoreira is there a reason you use npm to install neat and not just put everything in the app/styles directory? I originally just put the thoughtbot stack in the app/styles directory, and everything seems to be working great. I however did this as a first shot to get it working, and haven’t changed it since then because, hey, it was working!

7

Works! Many thanks Pedro. I ended up keeping bitters under app/styles though, to avoid creating yet another directory under app/.

@dolphorama I had them under app/styles before, and they loaded, but when I tried adding any custom styles, there would a segmentation fault on building. requiring with neat fixes that, somehow

8

@dolphorama, I’m not quite sure but I do believe the reason for npm’ing it is to get node sass to properly compile it. Maybe some thoughtbot folks can present a solid explanation for this.

@oliverbarnes, no problem, glad to help! I might put this into a blog post :slight_smile:

9

Yeah. Without taking the time to sit down and completely understand whats happening behind the scenes with Broccoli and asset compilation in ember-cli it can sometimes feel like magic. I don’t like when something feels like magic. I guess I have a project now for the weekend!