In this article, the author hooks a post-install script to run after Bower installs or upgrades. One use case where this is handy is when you have a CSS file that you want to include in your own build process, but you need it renamed to have a .scss extension instead of .css. In working on the latest version of Cover, I had a similar need — but I arrived at the same solution through different means.
I use the Aesop Story Engine plugin with Cover. In fact, I wrote my WordPress theme specifically with ASE’s use in mind. But a couple versions ago, the plugin broke the layout for the Chapter component. I fixed it with the latest point upgrade to Cover, but I determined that I wouldn’t let it happen again. So with the latest version of Cover, I’m changing things up.
I don’t keep any third-party assets in Cover’s codebase. I use Bower to maintain a list of dependencies, which include things like Font Awesome, Headroom, and Unslider. Installing a Bower package is normally just a single line in the command prompt:
$ bower install font-awesome --save-dev
But ASE doesn’t have an official Bower entry, so instead I had to add a line inside the “devDependencies” entry in my bower.json:
This points Bower to the archive it should download to get the latest version of ASE. After the config is saved, I rerun the install command:
$ bower install
Now Bower has downloaded the latest version of ASE inside my bower_components directory, and I can use its stylesheet. But not quite.
I don’t want to enqueue yet another file. I want to include ASE’s styles inside my Sass-built stylesheet, but I can’t use the preprocessor version because the ASE developers use Less, and I use Sass. So instead, I take the existing stylesheet (which is also part of the downloaded zip file), and using the copy task, rename it to have a .scss extension.