Incorporate Bootstrap 4 source (scss) into Angular 7 project

Test project – basic angular project – github | stackblitz | Live preview:

  • Generate new project choosing scss as default
> ng g angular-bootstrap
  • Install bootstrap as a node dependency
> npm i bootstrap@latest
  • Go to the node_modules/bootstrap/scss/bootstrap.scss file and copy all the content inside
  • Go to src/styles.scss and paste
  • Prepend every @import string with ~bootstrap/scss/ i.e.
// before
@import "functions";
...

// after
@import "~bootstrap/scss/functions";
...
  • Run ng serve for a dev server. Navigate to http://localhost:4200/.

Simplify @import statements by using preprocessor options (optional)

  • Open angular.json file
  • Append "stylePreprocessorOptions" after "architect" > "build" > "options" > "styles"
"styles": [
    "src/styles.scss"
],
"stylePreprocessorOptions": {
    "includePaths": [
        "node_modules/bootstrap/scss"
    ]
},
  • Stop the server [Ctrl]+[C] then run again ng serve to apply changes. Navigate to http://localhost:4200/.

Remarks

Default bootstrap settings

To override Bootstrap settings (variables) put code before Bootstrap’s @import statements – examples provided in styles.scss

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

CLI

This project was generated with Angular CLI version 7.0.5.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

This site uses Akismet to reduce spam. Learn how your comment data is processed.