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!

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

5 1 vote
Article Rating
Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
petervg
1 year ago

Great tutorial and very well explained.

I got almost everything working… but I have the issue that the cache is not cleared when modifying a scss file.

Saving a scss file triggers the reload of the page, but the changes (css and template changes) are not applying directly. I have to manually clear the cache before the results are visible.

Looking into the gulpfile, I don’t see any drush command either.

imrodmartin
1 year ago
Reply to  Petervg

that’s correct. You can either do a drush cr in a terminal or clear cache at Configuration -> Development -> Performance -> Clear Cache (admin/config/development/performance)

2
0
Would love your thoughts, please comment.x
()
x