Skip to content
Import Bootstrap's source (*.scss) into Angular project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
src
.editorconfig
.gitignore
README.md
angular.json
package-lock.json
package.json
tsconfig.json
tslint.json

README.md

Angular 7 and Bootstrap 4 source (scss)

Test online (Stackblitz)

  • 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.

You can’t perform that action at this time.