How to use Bootstrap 4 with SASS in Angular

user_3497671 0
Viewed 57448

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

In particular I need to:

  • use SASS instead of CSS both as global style and Component-style
  • compile Bootstrap SASS source together with my custom *.scss styles
  • make sure that my custom styles override the Bootstrap source, so I can override the Bootstrap sources when needed, without editing the Bootstrap source itself (making it easy to upgrade the Bootstrap source version)
  • add watch & auto-recompile whenever any of my *.scss files change (both for components & global style) to the ng serve script
bootstrap-4 angular-cli angular sass
5 Answers

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";
user_3563800

Here is an alternative way I managed to build successfully

1 - Install bootstrap 

npm install bootstrap

This should add boostrap scss file under node_modules. (Step 2 - 6 is from https://code.visualstudio.com/docs/languages/css)

2 - Install node-sass

nmp install -g node-sass

This is need to transpile sass to css

3 - Create a folder whereever is suitable for you to keep scss and generated css files. e.g.

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4 - Create a custom.scss file with following content:

@import "../node_modules/bootstrap/scss/bootstrap";

5 - Create a task in VSCode by Ctrl+Shift+B > Configure Tasks > Create tasks.json file from template > Others

tasks.json file under .vscode is created with default content. Replace the content with

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

Note: Modify the file names and paths according to your needs.

6 - Run the task to generate css: Ctrl+Shift+B > 'Sass compile' or

7 - Follow the steps in bootstrap theming procedure: (https://getbootstrap.com/docs/4.1/getting-started/theming/)

user_5291990

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.

user_26484440
Related