As of this writing, Bootstrap Drupal theme only supports LESS. This tutorial will show how to create bootstrap sub-theme supporting SASS and use Grunt to manage our workflow effectively. My operating system is Windows. Therefore, the shell commands, output, etc. that will be shown here are for Windows.
With SASS and Compass, all the imported SCSS and SASS files can be compressed and merged into a single CSS output file. What about the regular CSS files? According to this documentation all files with .css extension, it will be compiled to a CSS @import rule.
For example, if style.scss contains:
@import "../../bower_components/animate.css/animate.css";
... it will be compiled to:
The following is a sample of gruntfile configuration for grunt sync integrates with grunt watch:
I have tried to use Prepros and one feature that I like is its image optimization. This feature reduces the byte size of of the image and this means faster web page loading. But Grunt is the workflow management I am using. Good thing is Grunt has this Imagemin plugin which can also optimize images (jpeg, png and gif). Lets take a look on how to setup and use this plugin to our workflow.