Using Bootstrap 5 in Angular 14 with SCSS

Question

I'm trying to setup Bootstrap 5 in my Angular 14 project which is using SCSS instead of CSS. I have installed bootstrap via npm ( npm install bootstrap --save ) and it's now correctly referenced in my package.json file:

"dependencies": {
    "@angular/animations": "^14.2.2",
    "@angular/cdk": "^14.2.2",
    "@angular/common": "^14.2.2",
    "@angular/compiler": "^14.2.2",
    "@angular/core": "^14.2.2",
    "@angular/forms": "^14.2.2",
    "@angular/material": "^14.2.2",
    "@angular/platform-browser": "^14.2.2",
    "@angular/platform-browser-dynamic": "^14.2.2",
    "@angular/router": "^14.2.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

I've added the boostrap.scss file reference in my angular.json file:

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/file-sharing-app.ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/custom-theme.scss",
              "node_modules/bootstrap/scss/bootstrap.scss"
            ],
            "scripts": []
          },

But the below class is having no effect:

<span class="ml-3">File Sharing App</span>

None of the other bootstrap classes I've used have worked either. I have tried restarting the application (re running ng serve ). Does anybody know what I am missing?

Answer 1

Have you tried rerunning your applications?

If you already tried that, then you can try installing jquery

npm install jquery --save

and adding

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Answer 2

If you are using SCSS, don't add it to your angular.json config. Instead, add this to your styles.scss directly:

@import "~bootstrap/scss/bootstrap";