Bootstrap 4 SCSS Angular 8 - CSS

Bootstrap 4 is a free and open-source CSS framework that is widely used to create responsive and mobile-first websites. It provides a wide range of pre-built components and utilities, making it easy to quickly create professional-looking designs.

However, sometimes you may want to customize the style of your Bootstrap 4 components, or add your own custom styles to your Angular 8 project. This is where SCSS comes in.

SCSS (Sassy CSS) is a preprocessor for CSS that adds features like variables, mixins, functions and more, making it a powerful tool for managing your CSS stylesheets.

In this tutorial, we'll look at how to use SCSS with Bootstrap 4 in an Angular 8 project.

1. Setting up SCSS

The first step is to set up SCSS in your Angular 8 project. To do this, open your project in your favorite editor, and navigate to the src/ folder. Inside this folder, create a new folder called scss, and then create a new file inside this folder called styles.scss.

In this file, you can define your global styles, variables, functions, and mixins. For example, let's define a variable to set the primary color of our website:

$primary-color: #007bff;

This sets the value of $primary-color to the Bootstrap 4 primary color.

2. Importing Bootstrap SCSS

The next step is to import the Bootstrap SCSS files into your project. To do this, you will need to install the bootstrap package via npm:

npm install bootstrap

After installing Bootstrap, navigate to the angular.json file in your project and add the following configuration:

"styles": [
    "src/scss/styles.scss",
    "node_modules/bootstrap/scss/bootstrap.scss"
]

This tells Angular to include your styles.scss file, as well as the Bootstrap SCSS files.

3. Overriding Bootstrap styles

Once you have imported the Bootstrap SCSS files into your project, you can easily override the default styles by redefining the relevant variables or by using mixins.

For example, to change the background color of the navbar, simply redefine the $navbar-bg variable in your styles.scss file:

$navbar-bg: $primary-color;

This sets the background color of the navbar to the value of the $primary-color variable we defined earlier.

4. Creating custom styles

Finally, you can add your own custom styles to your Angular 8 project. Simply add additional SCSS files to your src/scss folder, and import them in your styles.scss file.

For example, let's create a file called buttons.scss, and define some custom button styles:

.btn-primary {
    background-color: $primary-color;
    color: #fff;
    border-color: $primary-color;
}

.btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border-color: #6c757d;
}

After creating this file, you can import it in your styles.scss file:

@import 'buttons.scss';

This will apply your custom button styles to all the relevant buttons in your Angular 8 project.

Conclusion

In conclusion, using SCSS with Bootstrap 4 in an Angular 8 project is a simple and effective way to customize the style of your components, and add your own custom styles. With the ability to define variables, functions, and mixins, SCSS provides a powerful toolset for managing your CSS stylesheets.