Skip to content

Angular devkit 18.0.7 not compatible with Bootstrap 5.3.3 #28035

@watchity

Description

@watchity

Command

serve

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.0

Description

I updated from Angular 13 to latest 18.0.0 and this bug has arisen.

./libs/shared/styles/src/index.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
From line 30, column 13 of node_modules/bootstrap/scss/_grid.scss: 
   ╷
30 │             @extend %responsive-container-#{$breakpoint};
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
You may not @extend selectors across media queries.
   ╷
30 │             @extend %responsive-container-#{$breakpoint};
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_grid.scss 30:13               @content
  node_modules/bootstrap/scss/mixins/_breakpoints.scss 62:7  media-breakpoint-up()
  node_modules/bootstrap/scss/_grid.scss 19:5                @import
  node_modules/bootstrap/scss/bootstrap.scss 16:9            @import

Minimal Reproduction

  1. Install Angular 18.0
  2. Install Bootstrap 5.3.3
  3. Run ng serve --ssl

Exception or Error

No response

Your Environment

ng version                                                                       1 ✘  wct_socketmix_38 3.8.18   20.11.1  

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.0.7
Node: 20.11.1
Package Manager: yarn 1.22.22
OS: linux x64

Angular: 18.0.6
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1801.0
@angular-devkit/build-angular   18.1.0
@angular-devkit/core            18.0.7
@angular-devkit/schematics      18.0.7
@angular/material               18.1.0
@schematics/angular             18.0.7
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: repro stepsWe cannot reproduce the issue with the information given

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions