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:

  1. Create an Angular app using ng new <app name>
  2. npm i bootstrap
  3. Edit the angular.json file and add Bootstrap to the styles property: 
    [...,"node_modules/bootstrap/scss/bootstrap.scss"]
  4. Add a src/scss/Custom.scss file and set it up as described at https://getbootstrap.com/docs/5.0/customize/sass/ (details below)
  5. 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",

}
cssangularsassbootstrap-5

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 13: Opt for Just-in-Time compilation instead of Ahead-of-Time when using ng-

Starting from Angular 9, AOT compilation is enabled by default. I attempted to run the application in JIT mode by using the option "--aot=false", which resulted in an error stating "Unknown option --aot". Furthermore, when trying to disable AOT at startu ...

angular

Tips for maintaining the navigation tab's consistent appearance

Whenever I click a button on the sidebar and the current tab is the second tab, the navigation bar switches to display the first tab. How can I prevent this switch and keep the second tab displayed when clicking a button on the sidebar? The code for this ...

javascriptjqueryhtmlcssangularjs

Get a single object from an array with .single method provided by @ngrx

Seeking to retrieve an Observable containing a single object from an array of objects in my store. I aim to utilize the .single operator, which should throw an exception if there is not exactly 1 object present. However, I'm struggling with this as my ...

javascriptangularreduxrxjsngrx

When I refresh the page in Angular2, the router parameters do not get loaded again

When loading my application on routers without parameters, everything is normal. However, when trying to use a router with params, the application fails to load. For example: localhost:3000/usersid/:id The code for the router is as follows: const appRou ...

javascriptangulartypescript

Transitioning the font stack from SCSS to JSS (cssinjs)

We are currently implementing a variety of custom fonts with different weights for various purposes. With our entire stack now using Material UI with JSS theming and styling, we aim to eliminate the remaining .scss files in our folder structure. All the f ...

cssfontsmaterial-uijsscss-in-js

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...

htmlcss

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

The NgModel within the parent component is expected to mirror the state of the child component

My Angular 10 project includes a library with a wrapper component around a primeng-component. The primeng-component utilizes ngModel. I am trying to set the ngModel in the parent-component accessing the wrapper-component, and I want any changes made to the ...

angulartypescriptprimeng

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

phpjqueryhtmlcssajax

Modifying KineticJs.Image with css styling

Hey there, I'm currently working on a project that involves canvas manipulation. I've successfully figured out how to draw an image and move it within the canvas, which wasn't too difficult to achieve. However, I'm now facing a challeng ...

csskineticjs

Having trouble getting my Angular project up and running - facing issues with dependency tree resolution (ERESOLVE)

Currently, I am in the process of following an Angular tutorial and I wanted to run a project created by the instructor. To achieve this, I referred to the steps outlined in the 'how-to-use' file: How to use Begin by running "npm install" within ...

angulartypescriptnpm

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Transferring content files from a nuget directory to a specific destination folder

I am dealing with a nuget package that includes css files as content. My goal is to have these css files copied to a specific directory upon importing the package into a project, without requiring the project's structure to match exactly. Is there a ...

cssnuget

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Take a look at this example to see the issue in action. I'm attempting to access the cssText property of a <div> using window.getComputedStyle(element) (which provides a CSSStyleDeclaration object). While this works smoothly in Chrome, it' ...

javascriptcssinternet-explorer

The button functionality gets hindered within the Bootstrap well

I'm trying to figure out what's wrong with my code. Here is the code: https://jsfiddle.net/8rhscamn/ <div class="well"> <div class="row text-center"> <div class="col-sm-1">& ...

javascripthtmlcsstwitter-bootstrap

Challenges associated with adding information to FormData in an Angular Net 5 Application

I'm currently working on developing an application using Angular 11 and .NET 5 and am facing some challenges while trying to implement the file upload feature. I have successfully managed to send pictures to the server, but I'm encountering issue ...

angularasp.net-core

Alteration of icon size in input field using jQuery unintentionally

My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems: The name of the icon appears on top of the ...

jqueryhtmlcss

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

Two components are loaded simultaneously by Angular

I encountered a strange bug in my Angular2 frontend application. After logging in, I see two components appearing simultaneously - the login component and the main component. In the screenshot above, the login functionality inputs should not be visible. ...

angularangular2-routing

Running a CSS keyframes animation can be achieved by removing the class associated with it

Is there a way to reverse the CSS animation when a class is removed? I'm trying to achieve this on my simple example here: https://codepen.io/MichaelRydl/pen/MWPvxex - How can I make the animation play in reverse when clicking the button that removes ...

javascripthtmlcss