How to Use Bootstrap 5 and SASS in Drupal 9

In a past tutorial, we discussed the use of the Bootstrap Barrio theme for Drupal. The Bootstrap Sass subtheme is a Barrio subtheme, which adds SASS capabilities to the theming process of your Drupal site. This improves the speed of the development process. 

Disclaimer: You need Node.js installed on your server, the installation of Node.js is out of the scope of this tutorial.

Keep reading to learn how to use this theme.

Step #1.- Install the Required Themes

• Open the terminal application of your system.
• Position the cursor in the main folder of your Drupal installation (the file composer.json is located there.
• Type: composer require drupal/bootstrap_sass 

This will download the Barrio theme, the SASS Starterkit for Barrio (themes folder), and Twitter Bootstrap’s library (vendor folder).

Step #2.- Create a Subtheme

• Type these commands in the following order.  
  • cd web/themes/contrib/bootstrap_sass/ to access the starter kit folder.
  • chmod +x scripts/create_subtheme.sh to give execution permissions to the script.
  • ./scripts/create_subtheme.sh to execute the script.
• Give the subtheme a proper machine name and human-readable name
• Click Enter twice

Step #3.- Configure the Subtheme

• Type the following commands in order:
  • cd ../..  to return two levels up in the tree structure (or two levels down, it depends on how you visualize the tree…)
  • cd custom/[the_name_of_your_theme_here] to access the theme folder.
  • npm install --global gulp-cli to install gulp.
  • npm install to install the rest of the dependencies.

The npm command indicates that Node.js is installed.

• Open gulpfile.js on a code editor.
• Change line 79 according to your own server
• Save the file

Step #4.- Developer Mode

• Navigate to the /sites folder.
• Type the following commands in order:
  • cp example.settings.local.php default/settings.local.php to copy the example file with another name into the default directory.
• Open /default/settings.php
• Uncomment these lines at the end of the file:

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

• Save the file

• Open /sites/development.services.yml 
• Take a look at the code first, select it and delete it
• Paste this code instead:

parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

NOTE: The indentation is very important!

• Save the file

Step #5.- Enable the Theme

• Click Appearance.
• Locate your theme.
• Click Install and set as default.

Step #6.- Running gulp

• Navigate to the subtheme directory with your terminal application.
• Type gulp.

This will start the live server and open a new instance of your site on your browser, now you can change the styles. 

Step #7.- The Theming Process

I have created an article, let’s write some styles.

• Open /web/themes/custom/[yourthemename]/scss/style.scss in your code editor.
• Paste this code at the end of the file:

body {
   font-family: 'Courier New', Courier, monospace;
   color: $gray-800;
   h1 {
       font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }
   .node--type-article {
       .field--type-image {
           float: none;
           img {
               display: block;
               width: 100%;
               height: auto;
           }
       }
   }
}

• Make sure your Node server is running.
• Save the file, the browser should refresh automatically.

The value $gray-800 and all other variables can be found on the file called variables.scss. You can edit this file to your liking.

You should also take a look at /themes/custom/[yourthemehere]/scss/typography.scss, where you will find all typographic variables.

Summary

The SASS Starterkit for the Drupal 9 Bootstrap Barrio theme allows developers to apply a modern frontend development approach. 

I hope you liked this tutorial. Thanks for reading!