The best kittens, technology, and video games blog in the world.

Sunday, November 11, 2018

Webpack boilerplate package for Imba and SCSS

Fluffball by Rum Bucolic Ape from flickr (CC-ND)

Imba looks extremely interesting - seriously, just check out the code examples on their website.

I wanted to give it a go, there was just one tiny problem - in Javascript world you can't just gem install a few things and run them like that. Nope, painless setup is just a crazy ruby idea that never got much traction anywhere else. In Javascript universe everything always requires painfully complicated setup.

I found some boilerplate example for Imba, but it was broken on so many levels, I had to start pretty much from scratch.

So here's a working webpack boilerplate for Imba with SCSS support. Feel free to fork it into your project.

What's in it:
  • Latest Webpack
  • Imba
  • SCSS (as plain old compile to CSS, intentionally no CSS-in-JS shenanigans)
  • CSS normalize to avoid cross browser pain
  • standard npm commands for development and production builds.
Everything uses sane 2 space indentation, and tries to avoid doing anything weird.

What's obviously missing is some kind of testing framework, so PRs wanted.

I haven't used it for anything more complicated than just another TODO app yet, so I don't know if there are any issues. Just report them on github.

Thanks to all the brave souls who answered webpack questions on Stack Overflow - somehow I managed to duct tape working boilerplate out of all that.