Angular and Bootstrap are very useful tools when developing front ends. You can build single page applications with powerful features of Angular and make them look pretty by using Bootstrap classes and components. They both have new versions now, coincidentally each has version 4. However, Bootstrap 4 is currently in beta stage.
In this blog post I will explain how to import Bootstrap 4 Sass module in an Angular 4 application as SCSS.
UPDATE - December 5, 2017: Angular recently launched version 5.0.0 and the method in this post also apply to Angular 5, too.
Create a new Angular 4 app to use SCSS
By default Angular 4 applications use css as style files. However, this can be modified. To achieve this, we only include a
--style attribute in our call while creating our application using Angular CLI.
Here “my-new-app” is the name of our application. You can substitute it with a name that you choose for your application.
Install Ng-Bootstrap Module
Now, let’s integrate this module into our app.module.ts file. Please see how we imported NgbModule into typescript file and imported in AppModule class in NgModule decorator.
Install Bootstrap Sass and Import
Then we need to import Bootstrap Sass into our application. In styles.scss add this line:
Customize Bootstrap Variables
I prefer making a separate file for putting all bootstrap customizations such as link colors. Let us create “styles” folder in “src/assets” and create a file named “_bootstrap_customizations.scss”
Then change link color as red in all our application using bootstrap’s $link-color variable.
To make this take effect globally in our application, we import this file in our styles.scss before bootstrap. Now our styles.cscc becomes:
To test all these let us create a container and card in our app.component.html and put some text and link there.
Change app.component.html by deleting all and inserting:
Run the application using angluar-cli.
Open your browser and navigate to “localhost:4200” and the result should be similar to this:
As can be seen, it is very straightforward to include Bootstrap 4 Sass module into Angular 2/4/5 applications.
You can find a sample application for an implementation of this integration our Github repository.
Thanks for reading!