Clash Royale CLAN TAG#URR8PPP

How to use Bootstrap 4 with SASS in Angular

I'd like to use Bootstrap 4 with SASS in an Angular(4+) project created with Angular CLI.

In particular I need to:

ng serve

5 Answers
5

In order to setup Angular + Bootstrap 4 using SASS we just need to configure the Angular CLI and install the Bootstrap 4 npm package. There is no need to install any SASS compiler because it's already included.

EDIT: this answer has been updated to work with a newer version Angular CLI (tested with version 6.1.3). I left the instructions for the older Angular CLI in the bottom of this answer, however I strongly recommend you to update your Angular CLI version.

INSTRUCTIONS USING NEW ANGULAR CLI (version 6 or higher)

Edit your angular.json file and add the "styleext": "scss" key value to the projects.PROJECT_NAME.schematics.@schematics/angular:component object.

angular.json

"styleext": "scss"

projects.PROJECT_NAME.schematics.@schematics/angular:component

This is how it should look like:

{
// ...
"projects": {
"PROJECT_NAME":
// ....
"schematics":
"@schematics/angular:component":
"styleext": "scss"

,
// ...



Simply use:

ng new my-project --style=scss

ng new my-project --style=scss

To accomplish this you just need to rename the style file from .css to .scss and change the @Component( ... ) configuration accordingly:

.css

.scss

@Component( ... )

styleUrls: ['./my-component.scss']

styleUrls: ['./my-component.scss']

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

ng serve

Install Bootstrap 4 via npm:

npm install bootstrap --save

npm install bootstrap --save

Now add Bootstrap to the angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

angular-cli.json

styles

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


This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of angular-cli.json.

app/assets/scss

styles

angular-cli.json

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc..

main.scss

_variables.scss

_global.scss

So in your angular-cli.json you will reference just one custom main.scss file:

angular-cli.json

main.scss

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


which internally includes all your custom global* SASS code:

// main.scss
@import "variables";
@import "global";
// import more custom files...


*Note that you MUST NOT include here the *.scss style files of the single Components.

*.scss

There are some projects that allow you to use Bootstrap without jQuery.

Two examples:

ngx-bootstrap

ng-bootstrap

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

INSTRUCTIONS USING OLD ANGULAR CLI

WARNING: I will not maintain this part of the answer anymore, so instead to proceed reading it, I recommend to update your Angular CLI version and following the instructions above.

Run:

ng set defaults.styleExt scss

ng set defaults.styleExt scss

this will affect your .angular-cli.json config file ( example ).

.angular-cli.json

Note: in case you're starting from scratch, you can create a new project using Angular CLI using:
ng new my-project --style=scss
which is the equivalent of creating a new project normally and then running the command mentioned above.

ng new my-project --style=scss

To accomplish this you just need to rename the style file from .css to .scss and change the @Component( ... ) configuration accordingly:

.css

.scss

@Component( ... )

styleUrls: ['./my-component.scss']

styleUrls: ['./my-component.scss']

( example ).

In this way the angular-cli will automatically watch and recompile these files whenever they change while you are executing commands like ng serve.

ng serve

Install Bootstrap 4 via npm:

npm install bootstrap --save

npm install bootstrap --save

Now add Bootstrap to the .angular-cli.json config inside the styles array (before any other custom css/scss files in order to let them override bootstrap rules :

.angular-cli.json

styles

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


( example ).

This way the Bootstrap 4 source code will stay clean and it will be very easy to upgrade it whenever a new version is released.

Any additional SASS styles which should globally affect the project (unlike the single Component styles) can be added under app/assets/scss and then referenced in the styles array of .angular-cli.json.

app/assets/scss

styles

.angular-cli.json

My suggestion is to reference a single main.scss file which will include all your custom SASS styles: for example a _variables.scss for your custom variables, a _global.scss file for your global rules, etc.. ( example).

main.scss

_variables.scss

_global.scss

So in your .angular-cli.json you will reference just one custom main.scss file:

.angular-cli.json

main.scss

"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"assets/scss/main.scss"
],


which internally includes all your custom global* SASS code:

// main.scss
@import "variables";
@import "global";
// import more custom files...


*Note that you MUST NOT include here the *.scss style files of the single Components.

*.scss

There are some projects that allow you to use Bootstrap without jQuery.

Two examples:

ngx-bootstrap

ng-bootstrap

The difference between those two project is discussed here: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

In addition to @ShinDarth's answer, you may want to go for a more minimal solution, importing only the Bootstrap modules you need instead of them all.

So you would replace:

"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"assets/scss/main.scss"
],


With:

"styles": [
"assets/scss/main.scss"
],


Then your main.scss would look like:

main.scss

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";


assets

build --prod

From version 6
should be

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


If you have a custom theme for me works

only adding the lib in the styles.scss

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";


In case someone else run into the Javascript dependencies issue that I had when running Bootstrap 4 using angular-cli, you also need to let the angular-cli compiler know that you have installed the other dependencies that boostrap 4 needs:

jquery, popper.js and bootstrap.js

For that you need to modify the scripts array on the .angular-cli.json configuration file to something like this:

"scripts": [
"../node_modules/jquery/dist/jquery.slim.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]


I am guessing that you have installed jquery and popper using npm install --save jquery popper.js so those packages are available on the node_modules folder.

If you want to modify the bootstrap styles and specify your own colors for example then you can't just load the scss provided in your angular.json file. You will need to import and scss file in your styles.scss.

Create a new Angular CLI project with the SCSS style option:

ng new my-app --style=scss
cd my-app


Install the SASS version of the Bootstrap project with:

npm install bootstrap --save
npm install jquery popper.js --save // install plugin dependencies


In the src/assets/ directory, create a an empty file named: _variables.scss.

Copy any variable you want to override from node_modules/bootstrap/scss/_variables.scss to your own src/assets/_variables.scss

In src/styles.sass, add the following:

@import 'src/assets/variables';
@import "~bootstrap/scss/bootstrap";


In src/app/index.ts add support for dropdown buttons for example:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
... and other plugins


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.