Bootstrap Theme and SASS - Theme Development - Drupal 8

When I was theming in Drupal 7, I would do so using the LESS starter kit provided by the Bootstrap theme. However, at the time of writing the LESS module has not been ported to Drupal 8, so this gives me an opportunity to try and learn the SASS starter kit instead. There doesn't appear to be any Drupal 8 module to automatically compile SASS for us so we'll have to take care of that ourselves.

Download and Install Bootstrap Theme

On the command line, cd into the project directory and do the following:

composer require drupal/bootstrap

This will download the Bootstrap theme to yoursite/web/themes/contrib/bootstrap. In the Bootstrap theme, go to the starterkit directory, copy the SASS folder, and paste it into your custom theme module folder so you end up with yoursite/web/themes/custom/sass. Open up the README file and follow the instructions on how to create your Bootstrap sub theme then enable the theme. Don't forget to download the SASS version of Boostrap into your sub theme.

Automate SASS compilation

Note: I do not do it this way any longer. I changed IDE from Netbeans to PhpStorm and with its File Watcher plugin I can do this a better way.

We are going to use Grunt and Libsass to compile our SASS files into CSS. To do this we firstly need to install Node.js on our development environment. I am using Drupal VM and Node.js comes with it as an option already. Once Node.js is installed, we need to create two files called package.json and Gruntfile.js, and place those in our Bootstrap sub theme folder. The contents of those files are:

package.json

{
  "name": "themename",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "^0.4.1"
  }
}

Gruntfile.js

module.exports = function (grunt) {
  "use strict";
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		sass: {
			prod: {
				options: {
					outputStyle: 'compressed'
				},
				files: {
					'./css/style.css': './sass/style.scss',
				}
			},
			dev: {
				options: {
					outputStyle: 'expanded'
				},
				files: {
					'./css/style.css': './sass/style.scss',
				}
			}
		},
		watch: {
			options: {
				livereload: true,
			},
			css: {
				files: ['./sass/**/*.scss'],
        		tasks: ['sass:dev'],
        		options: {
		        	spawn: false
		        }
		    },
		    livereload: {
				options: {
					livereload:true
				},
				files:[
					'./css/*.css',
				]
			}
		}
	});

	// Load tasks...
	grunt.loadNpmTasks('grunt-sass');
	grunt.loadNpmTasks('grunt-contrib-watch');

	// Default task.
	grunt.registerTask('default', ['watch']);
};

Next you need to cd into the sub theme folder and enter the command:

npm install --save-dev

You should now see node_modules directory in your sub theme folder. Next you need to enter the command:

npm install -g grunt-cli 

Now to install libsass run the command:

npm install --save-dev node-sass

Now we need to install grunt.sass by running the command:

npm install --save-dev grunt-sass

And finally we install grunt-contrib-watch by running the command:

npm install --save-dev grunt-contrib-watch

Now you're ready to start theming. If you run grunt:

grunt

it will watch when any SASS files are changed and compile into CSS. It will create the style.css file for you if it doesn't exist. Happy theming. 

grunt.png