A bit about the environment: we create automation for building user interfaces using Grunt , we use Twitter Bower to manage third-party developers, since we don’t want to save third-party code in our repository, we use Compass to extend CSS.
While creating a compressed version of the vendor’s assets in a single CSS file and encountering a problem, Compass doesn’t convert the images in any way into the built-in images. We want all images to be embedded in the resulting CSS file with the data URL (provided that we support browsers later than IE9 =).
The main SCSS file including Bootstrap SASS looks like
// styles/main.scss $iconSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings.png'; $iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png'; //.. @import "../components/bootstrap-sass/lib/bootstrap";
Compass command looks like
compass compile --css-dir target/compass/styles \ --sass-dir app/styles --images-dir app/images --output-style expanded
Result looks like
// target/compass/styles/main.css /* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */ [class^="icon-"], [class*=" icon-"] { display: inline-block; ... /* WANT THIS IMAGE INLINED */ background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png"); ... }
So, the main desire is to get all url() expressions for storing base64-encoded embedded images. Alternatively, we can switch to LESS if this makes this opportunity easier. Actually, good, because we eliminate the dependency on Ruby / Compass, and we can install everything with NPM
source share