We replaced thirty lines of Webpack config with one line of bash
Our mistake was assuming that a tool that does one thing extremely well will also be awesome to use for everything else. Like using a hammer to eat soup.
How we wanted to compile CSS
We started working on integrating Sass and CSS into our shiny new Webpack 2 config. This is a list of the stuff that we ended up adding to webpack.config.js, one line at a time:
- Debug URLs for background-images and web fonts
- Separate folders for JS and CSS
We challenged our approach and started searching for options out of the box. How about compiling the Sass code using the command line? We had already installed node-sass, so we could just launch this:
node-sass scss/styles.scss build/styles.css
A bit of StackOverflow search later, we added a line to package.json that detects any file being added, removed or updated:
"watch:css": "inotifywait -m -r -e modify,create,delete ./scss/ | while read NEWFILE; do node-sass scss/styles.scss build/styles.css; done"
One of the advantages of using a native tool is that it scales with the size of the folders to watch. The trigger is almost immediate, and the watch is reused between compilations.
There is one last problem, which is launching this watch:css script at the same time than webpack or our local web server. We used concurrently for that:
"watch:js": "NODE_ENV=development webpack --watch --config webpack.config.js",
"watch:css": "inotifywait -m -r -e modify,create,delete ./scss/ | while read NEWFILE; do node-sass scss/styles.scss build/styles.css; done",
"watch": "concurrently \"npm run watch:js\" \"npm run watch:css\" \"http-server -s .\" \"xdg-open http://127.0.0.1:8080/test/\"",
You may have noticed that we are just using http-server instead of webpack-dev-server. We also evaluated pros and cons in this case, and simplicity trumps for us, since most of our coding is done against Mocha tests.
We are way happier now and trust much more the maintainability of the solution (you can see the final package.json here). You could tell it’s the simplicity, but it’s also that these are ages-old tools. They are not going to change anytime soon, but it’s hard to get anything simpler than that.