Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Question

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Having some trouble setting up Angular with SCSS and Bootstrap. When attempting to run ng serve, I encountered the following error:

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

To replicate this issue, follow these steps:

Create an Angular app using ng new <app name>
npm i bootstrap
Edit the angular.json file and add Bootstrap to the styles property:
```
[...,"node_modules/bootstrap/scss/bootstrap.scss"]
```
Add a src/scss/Custom.scss file and set it up as described at https://getbootstrap.com/docs/5.0/customize/sass/ (details below)
Import
```
@import "./scss/Custom.scss";
```
into src/styles.scss.

Everything works fine when my src/scss/Custom.scss file is structured like this:

// 1. Include functions first (for color manipulation, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/functions";

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

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

// // 4. Include optional Bootstrap components as needed
// @import "../../node_modules/bootstrap/scss/grid"; // Uncommenting this line triggers error

However, uncommenting the last line leads to the mentioned error.

Dependencies listed in Package.json include:

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

}

css angular sass bootstrap-5

Answer 1

Answer №1

After encountering an issue, I managed to resolve it by incorporating bootstrap styles at the beginning of my styles.scss file:

@import 'node_modules/bootstrap/scss/bootstrap';
/* ...  */

Credit goes to @ColinM for the helpful tip.

Answer 2

After encountering an issue, I managed to resolve it by incorporating bootstrap styles at the beginning of my styles.scss file:

@import 'node_modules/bootstrap/scss/bootstrap';
/* ...  */

Credit goes to @ColinM for the helpful tip.

Answer 3

Answer №2

I struggled to identify the issue at hand. I attempted to adhere to the instructions provided in the https://getbootstrap.com/docs/5.0/ documentation, but it appears that Angular compatibility may not be fully supported. Instead, opting for ng-bootstrap seems like a better solution.

Follow these steps in the CLI:

ng new my-ng-bootstrap-app # Create angular app. Select routing and SCSS preferences
ng add @ng-bootstrap/ng-bootstrap # Add bootstrap (refer to notes below on how bootstrap is integrated into the app)
ng generate component my-flex # Generate a new component to test bootstrap's flex styles
ng serve # Launch the Angular server

In later versions of Angular (specifically v14 onward), an error may arise. To resolve this, replace:

./src/styles.scss

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

With bootstrap configured, you can now visit https://getbootstrap.com/docs/5.0/layout/grid/ and copy the code snippets.

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

  <!-- Insert example code from https://getbootstrap.com/docs/5.0/layout/grid/#example here -->
<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

<!-- Erase previous code -->
<app-my-flex></app-my-flex>

Once completed, everything should function correctly. Verify in your browser’s developer tools that the DOM elements exhibit the applied bootstrap styles.

(FYI)

ng add @ng-bootstrap/ng-bootstrap

inserts the following into:

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]
})

Answer 4

I struggled to identify the issue at hand. I attempted to adhere to the instructions provided in the https://getbootstrap.com/docs/5.0/ documentation, but it appears that Angular compatibility may not be fully supported. Instead, opting for ng-bootstrap seems like a better solution.

Follow these steps in the CLI:

ng new my-ng-bootstrap-app # Create angular app. Select routing and SCSS preferences
ng add @ng-bootstrap/ng-bootstrap # Add bootstrap (refer to notes below on how bootstrap is integrated into the app)
ng generate component my-flex # Generate a new component to test bootstrap's flex styles
ng serve # Launch the Angular server

In later versions of Angular (specifically v14 onward), an error may arise. To resolve this, replace:

./src/styles.scss

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

With bootstrap configured, you can now visit https://getbootstrap.com/docs/5.0/layout/grid/ and copy the code snippets.

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

  <!-- Insert example code from https://getbootstrap.com/docs/5.0/layout/grid/#example here -->
<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

<!-- Erase previous code -->
<app-my-flex></app-my-flex>

Once completed, everything should function correctly. Verify in your browser’s developer tools that the DOM elements exhibit the applied bootstrap styles.

(FYI)

ng add @ng-bootstrap/ng-bootstrap

inserts the following into:

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]
})

Error: Angular encountered an undefined variable when attempting to import 'node_modules/bootstrap/scss/grid'

Answer №1

Answer №2

Similar questions

What is the best way to position images and URLs in div elements using CSS?

Enhance your React project by incorporating Material-UI card media elements with the ability to add

Tips on making a dropdown select menu expand in a downward direction

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

Disable Button's Shadow when it is in an active state (clicked)

What happens if I define both the left and right properties for spans?

What is the proper way to tap into the features provided by DefinitelyTyped in typescript?

Calculating the length of time based on a specific date in Angular 2+: A step-by-step

Div that scrolls independently without affecting the position of other elements

Exploring Angular 8 Route Paths

Encountered a Webpack issue when trying to load the primeng.min

Proper Placement of Required Field Validator Messages

Is there a way to alter a class using ng-class only when the form is deemed valid?

What are the steps for manually integrating Bootstrap into an Angular project?

Setting a default value in a select tag with ngModel in Angular 6

Animate images using mouse vertical movement

The inline feature of the Bootstrap input group addon is not being utilized

Calculate the quantity of rows within a specific div container

Display the datepicker beneath the input field

I'm having trouble viewing the unique Google Map design on my application