SassError: Undefined variable. When trying to import 'node_modules/bootstrap/scss/grid' with Angular

Question

I'm trying to set up Angular with SCSS and Bootstrap. I'm getting the following error when I try to run ng serve:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
114 │       @each $key, $value in $gutters {
    │                             ^^^^^^^^
    ╵
  node_modules/bootstrap/scss/mixins/_grid.scss 114:29       @content
  node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
  node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
  node_modules/bootstrap/scss/_grid.scss 32:3                @import
  src/scss/Custom.scss 11:9                                  @import
  src/styles.scss 2:9                                        root stylesheet

Steps to reproduce:

1. Create Angular app with ng new <app name>
2. npm i bootstrap
3. Update angular.json file. Add boostrap to styles property: [...,"node_modules/bootstrap/scss/bootstrap.scss"]
4. Add src/scss/Custom.scss file and populate, as per https://getbootstrap.com/docs/5.0/customize/sass/ (see below)
5. Import @import "./scss/Custom.scss"; to src/styles.scss.

My app works fine when my src/scss/Custom.scss file looks like this:

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/functions";

// // 2. Include any default variable overrides here

// // 3. Include remainder of required Bootstrap stylesheets
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

// // 4. Include any optional Bootstrap components as you like
// @import "../../node_modules/bootstrap/scss/grid"; // Uncommenting this line causes error

But uncommenting the last line will cause the above error.

Package.json dependencies include:

{
    ...
    "@angular/core": "^15.0.0",
    "bootstrap": "^5.2.3",

}

Answer 1

I couldn't figure out the error. I was trying to follow the documentation in the https://getbootstrap.com/docs/5.0/ docs, but I'm not sure it supports Angular. Instead, it seems better to use ng-bootstrap

Enter in CLI:

ng new my-ng-bootstrap-app # Create angular app. Choose routing and SCSS options
ng add @ng-bootstrap/ng-bootstrap # add bootstrap (see notes at bottom of this answer for how bootstrap is added to app)
ng generate component my-flex # Create a new component to test bootstrap's flex styles
ng serve # Run the Angular server

This will cause an error in later versions of Angular (I think from v14 onwards). Resolve this by replacing:

./src/styles.scss

// @import '~bootstrap/scss/bootstrap';
// Replace above line with
@import 'node_modules/bootstrap/scss/bootstrap';

Now that bootstrap is set up, we can go to https://getbootstrap.com/docs/5.0/layout/grid/ and copy the code.

src/app/my-flex/my-flex.component.html

  <!-- Replace the code in here with the example code from https://getbootstrap.com/docs/5.0/layout/grid/#example -->
<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

src/app/app.component.html

<!-- Delete all previous code -->
<app-my-flex></app-my-flex>

And that should be everything working. You can check the developer tools in your browser to see that the rendered DOM elements have bootstrap styles applied.

(FYI) ng add @ng-bootstrap/ng-bootstrap adds the following to:

src/styles.scss

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap';

src/app/app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
  ...
  imports: [
    ...
    NgbModule
  ],
  bootstrap: [AppComponent]
})