How to use Bootstrap 4 with SASS in Angular

Question

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 glo

Answer 1

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/)