How to Customize Bootstrap with Sass Update in Angular 19? Facing Issues with @use and @import Deprecation

[Nvn2708]

Hello Bootstrap Community,

I am working on an Angular 19 project where I am trying to customize the default Bootstrap theme using Sass. However, with the recent Sass updates, the @import rule has been deprecated and replaced by @use and @forward, which has led to a lot of issues when trying to customize Bootstrap styles.

Here is what I have done so far:

I have installed Bootstrap via npm and tried to import the Bootstrap SCSS files into my custom SCSS file.
I started by overriding Bootstrap’s default variables before importing the rest of the Bootstrap SCSS files, as recommended in the documentation.
However, I am facing issues with deprecated features, specifically the global mix() function and @import rules in Bootstrap’s SCSS files, which are preventing the project from compiling correctly.
I’ve attempted to switch to @use and @forward in my SCSS files to comply with the new Sass syntax, but I am still encountering errors like the Undefined mixin _assert-ascending in Bootstrap’s SCSS files, and the deprecation warnings related to @import.
Despite multiple attempts to resolve this, I am still facing issues with Bootstrap 5 and the latest version of Sass. I would really appreciate it if someone could guide me on how to properly customize Bootstrap 5 in my Angular 19 project, while avoiding these deprecated features and making use of @use/@forward.

Tried the order as well :

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

Here are the errors I’m encountering:

• Warnings about deprecated @import and mix() functions.
• Error: Undefined mixin _assert-ascending.
• Other compatibility issues when trying to use the new Sass syntax.

Has anyone faced similar issues or has any recommendations on how I can properly customize Bootstrap with the new Sass features in Angular 19?

Thanks in advance for your help!

[julien-deramond]

Hello @Nvn2708,
Currently, Bootstrap is not compatible with Sass modules. The warnings you're seeing are expected, as Bootstrap has not yet migrated to Sass modules. Work is in progress to address this, but it will take some time.
In the meantime, I recommend continuing to use Bootstrap with @import and either ignoring the deprecation messages or silencing them if they become too distracting.
Some references:

• Switch from Sass imports to Sass Module System #29853
• New deprecations in Sass 1.79 #40849
• dart-sass 1.80.0+ throwing a lot of deprecations #40962

[mrholek]

@Nvn2708, if you want, you can try our Bootstrap fork https://github.com/coreui/coreui. We migrated our project to Sass Modules, and everything works okay.

BTW. I hope this reply won't be considered self-promotion.

[Nvn2708]

As of now, I’ve disabled the warnings in angular.json by configuring it as follows:

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "sass": {
          "silenceDeprecations": ["import"]
        }
      }
    }
  }
},