Using SASS in Bootstrap Drupal theme

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.

Solution to no CSS source map file generated under production mode in Webpack 4

The issue is in Webpack 4 under "production" mode there is no source map file generated only for CSS (no problem in javascript source map file) but there is no issue in generation of source map for CSS under "development" mode.

Here are my previous configurations:


Compile imported regular CSS file in SCSS file to SASS @import rule

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:

Using SASS breakpoint mixin

One of the SASS mixins that I used a lot is the breakpoint. It makes the media queries in SASS simple and elegant. But first get the mixin at We can now write our media queries in SASS in the following manner:

@import "stylesheets/breakpoint";
.menu {
  @include breakpoint($screen-xs) { 
    font-size: 1em;
  font-size: 1.4em;

The CSS output: