Angular and Bootstrap 4 with Sass

Create angular project with Sass support

Angular has support for Sass build in. To create angular project with Sass support use the command:

If you update existing project use the command:

Install Bootstrap 4 with prerequisites

To install bootstrap use command:

Bootstrap 4 require jquery & popper.js lib to be installed:

To check if everything is in place to start using bootstrap check npm modules :

The command “npm list” should not print out any errors.

Using bootstrap and customize it

We need project’s scss main file and import bootstrap in it. Under assets folder create new subfolder “scss” and place new “main.scss” file in it.

Add main.scss file into styles array in the .angular-cli.json file.

Add import statement for bootstrap and the file with customized variables to main.scss.

You can also copy content of the node_modules/bootstrap/scss/_variables.scss file to your project custom _variables.scss file and change it as you wish. Some variables use computational functions for colors etc., so you will need to import file with functions first.

Underline as first character of scss files – partials

If the name of the scss file begin with the underline character, it means that file will not be compiled to CSS file. The file represent partial scss file and it must be imported in primary scss file.  So the variables file is actually named “_custom.scss” and is placed in the assets/scss folder. It is imported into main.scss.

Font-Awesome Sass integration

Bootstrap 4 does not bring any icon font any more so you can use font awesome for example.

Add import statement into main.scss file :

Sample usage:

Separate style from html

To simplify html I prefer to write style information in separate files.

When we use large CSS libraries as Bootstrap, chances are very high, that we will need to replace them later with another css library or our own developed style theme.

So if you wish to be able to change Bootstrap in the future for something more advanced or modern and still use it today, you create your own CSS class definitions and extend bootstrap classes.

 

For each angular component create separated partial scss file and import it in the main.scss file.

 

Name root html tag of each component with an ID so you can create styles in the hierarchy, valid only for the specific component, without leaking to any other part of the application.

Styles are created in SCSS files inside component id selector:

To use specific bootstrap class as your own, you need to extend it. You can use one or more classes in the single @extend statement.

Create your css selector names with semantic naming, that way your html code will become self descriptive and maintainable in the future.

Component declaration doesn’t use the scss files and we retain default view encapsulation of the component.

The compiled CSS file is only one for whole application.

Redesigned currency example now looks like this :

 

 

 

 

 

 

Angular and Sass with Bootstrap 3 style support

Integrating Sass and Bootstrap 3 to angular project

If you want to customize default bootstrap 3 CSS theme, you will need to change it. But to be able to do that you will need to install CSS extension language Sass and bootstrap-sass definitions and then compile custom bootstrap CSS within your angular application.  This is officially supported by angular-cli tools.

Setup angular project for Sass

If you create new angular project you can add option “–styles=scss” to “new” command. Yo can also change existing project style settings with “set” command:

To compile scss files to css files we need node-sass compiler :

Next we install bootstrap-sass in our project :

Writing CSS with Sass

First we create “scss” subfolder under the “assets” folder and create main.scss file in it.

Angular project expect your main.scss file defined in the .angular-cli.json file:

Start the project and angular-cli will compile SCSS and include result CSS into your application.

Test Sass compiler and angular integration

Add some simple scss definition to main.scss:

Now add a paragraph with “mytitle” class to your index.html :

If everything works  as expected you will see a test paragraph with correct font and weight as defined by scss:

Scss compiler create proper CSS definition and angular with webpack create styles.bundle.js file where we can find our “mytitle” class defined as :

Import Bootstrap Sass definitions

I am changing my existing seed project so you can get source code of this project from github repository “ANGULARMYAPP” .

Immediately after changing style definition to SCSS in our project, we lost all bootstrap CSS formating and the page looks like :

As we see from the screen above, there is no bootstrap formatting anymore, buttons are missing images (font_awesome as part of bootstrap also missing).

Now we will add bootstrap-scss and compile our own version of bootstrap css.

First we create new custom variables file and copy  all bootstrap theme variables to it. That way we will be able to customize any bootstrap setting simply by changing our copy of variable.

Create new file “_custom_variables.scss” and copy content of the bootstrap _variables.scss file into it or just copy a file into your scss folder. All files named with underscore are meant to be imported in another scss file by the Sass standard. Files without underscore are compiled to CSS format.

Now we import bootstrap and you variables file into main.scss file:

If everything works as expected we will get our original bootstrap design back and we can start modifying it, for example we will change primary button color to red. Change variable  $brand-primary in the file _custom_variables.scss to red color:

And the result should be visible immediately on the screen :

The button defined in the currency-list component with the class “btn-primary”  is now red as expected.

 

 

 

 

 

 

Angular – Add Bootstrap to your application

Bootstrap components / styles installation

In the root of your angular project open package.json file and add new dependency for Bootstrap and font-awesome.

Update installed dependencies with npm :

Add new directive for styles in .angular-cli.json configuration

After you build your angular application, new webpack prepared application will contain bootstrap components and font.

Start using bootstrap

Simply use bootstrap class directives in your templates, partial template code:

And the result of the example :