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:
ng new <app name>
npm i bootstrap
angular.json
file. Add boostrap to styles
property: [...,"node_modules/bootstrap/scss/bootstrap.scss"]
src/scss/Custom.scss
file and populate, as per https://getbootstrap.com/docs/5.0/customize/sass/ (see below)@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",
}
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]
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.