Bootstrap 4 Cookbook

Renaming main.scss

This step might not look that important, but it is actually crucial. To keep things as modular as possible, we need to make a different main.scss file for each recipe. To start with, let's rename the main.scss file to main-02-04.scss:

mv main.scss main-02-04.scss

Now, just copy main-02-04.scss and rename it main-02-05.scss. This second file will be used to test if everything is correctly automated from our Gruntfile. In our Gruntfile, we need to account for this multiplicity of files. We will do that by simply changing just one line in the sass:files code, as follows:

src: ['main.scss'],

We will change the line of code to this:

src: ['main-*.scss'],

Similarly, we will start our watch task with this line of code: