Bootstrap 5 Support

[FrancescoBorzi]

My app is running with ngx-toastr version 14.0.0 and Bootstrap 4.

I use toastr-bs4-alert.scss and it works nicely.

If I try to update it to Bootstrap 5, I get:

./src/assets/scss/main.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: SassError: $color: theme-color-level("success", 6) is not a color.
    ╷
151 │     rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E";
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/ngx-toastr/toastr-bs4-alert.scss 151:5  svg-factory()
  node_modules/ngx-toastr/toastr-bs4-alert.scss 159:5  @import
  src/assets/scss/main.scss 13:9                       root stylesheet

More info about my system:

Angular CLI: 12.0.1
Node: 14.15.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.1
@angular-devkit/build-angular   12.0.1
@angular-devkit/core            12.0.1
@angular-devkit/schematics      12.0.1
@schematics/angular             12.0.1
rxjs                            6.6.7
typescript                      4.2.4

[scttcper]

yeah thats a good idea. they have a toast component now too...

[NiteshSukalikar]

@FrancescoBorzi got any solution for rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E"; ?
if you got any alternative kindly please share !

[leifjones]

The answer may be to replace theme-color-level() with color-level(). I see that listed as a Bootstrap 5 breaking change under Sass: https://getbootstrap.com/docs/5.0/migration/#sass

EDIT:
Upon further digging, it seems we have to further switch to: twbs/bootstrap#30622

So it seems, we've got to edit code like theme-color-level('success', 6) to shift-color($success, 6). Explicitly:

• theme-color-level() --> shift-color(), but note that this actually add different amounts of white/black vs lightening/darkening. (I admit that I don't follow what that difference means yet.)
• Replace keywords like 'success' with $success (assuming those are either predefined or expressly defined)

EDIT 2: Please also see @gabrie-allaigre's comment below.

EDIT 3: @golayp's comment below about using !important may be helpful if there are conflicting css rules in your situation.

[FaabLondon]

Hello,

I was wondering if you had an update on the bug above?

Thanks a lot for your help

Fabienne

[FrancescoBorzi]

hi @FaabLondon , I haven't tried it recently so no updates from my side

[Eonasdan]

Hello. I made this work with BS5. I created a gist of my setup. I should write a small blog post with more details but I hope this helps people.

I wrote a post and have a github repo of this working.

[wwarby]

This is still broken. Would be great if support for Bootstrap 5 could be prioritised - it's been out for quite a few months now and it looks like the fix is relatively straightforward.

[Eonasdan]

@wwarby see if my blog post helps you

[wwarby]

@Eonasdan thanks - I had actually looked at your gist (not the blog post) - I can see I'd be able to get it working using your approach but I really don't want to add bloat to my project to work around an incompatibility issue - I don't actually have any pressing need to upgrade from Bootstrap 4 to 5 right now, it's just concerning when I'm locked into an old version of a major library like Bootstrap. If it doesn't get fixed in the next few months I'll probably make use of your approach.

[gabrie-allaigre]

@mrsegen Thanks

You have to add a multiplication to the level shift-color($success, 6 * $theme-color-interval)

I create a gist file for toastr-bs5-alert.scss

[CodersExpo]

Thanks for doing that @gabrie-allaigre but I agree with @wwarby not so much on "bloat" but more of a Band-Aid approach here since we have to add the file to the node_modules folder and/or edit the package.json to include a reference to the file:

"./toastr-bs5-alert": {
  "default": "./toastr-bs5-alert.scss"
},

I was able to resolve the build issue. However, our build pipeline fails as do each of our devs because they don't have the change in their node_modules folder. So, I would have to keep this file in the project and figure out a way to point to it without having to change toastrs package.json. I haven't tested yet to see if we get what we need from these styles but we'll see. Just hoping an update is done soon so we don't have to keep managing these patched fixes. Thanks!

Does anyone here have any idea when this will get resolved? We don't have the option to use Bootstrap < 5. I have "ngx-toastr": "^14.2.1" and "@angular/animations": "^13.2.3" in an angular 13.2.3 project and getting:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: theme-color-level("success", 6) is not a color.
╷
151 │ rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\ngx-toastr\toastr-bs4-alert.scss 151:5 svg-factory()
node_modules\ngx-toastr\toastr-bs4-alert.scss 159:5 @import
src\styles.scss 26:9 root stylesheet

./src/styles.scss - 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):
SassError: $color: theme-color-level("success", 6) is not a color.
╷
151 │ rgba($fill-color, 0.999999) + "' d='" + $path + "'/%3E%3C/svg%3E";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\ngx-toastr\toastr-bs4-alert.scss 151:5 svg-factory()
node_modules\ngx-toastr\toastr-bs4-alert.scss 159:5 @import
src\styles.scss 26:9

[golayp]

@mrsegen Thanks

You have to add a multiplication to the level shift-color($success, 6 * $theme-color-interval)

I create a gist file for toastr-bs5-alert.scss

I found a small issue on your code, you should add !important to all color of text in toastr since they are not apply correctly and reder as white text
Here an updated version in gist: https://gist.github.com/golayp/cd6f5c7ab8b23096f8a9cc422d34d9cf

[leifjones]

@golayp thanks for sharing that that helped!

My limited understanding is that there are cases when it is considered an unhealthy practice and that there are cases when !important seems to be necessary. I'll update my comment to reference your suggestion either way

[golayp]

I've update my gist : https://gist.github.com/golayp/cd6f5c7ab8b23096f8a9cc422d34d9cf to ensure links are colored correctly according to the type of toast

[golayp]

Hi @scttcper my feeling about new bootstrap toast component is that it is too UX heavy (lots of borders), maybe to ensure a maximum features compatibility, but in most case a simple box with the correct color is sufficient. It's why I used ngx-toastr for a while with complet user adherence.

[XhmikosR]

Hey, @scttcper. Could you please let me know what's left here so that we have a toastr-bs5-alert.scss officially included in the package?

I'm personally interested in this, so I could have a look as long as someone sums up the issues.

[Nabeeh-AlSawaf]

any new updates on this ? i'm interested as well since this package is always in my projects

[grozandrei]

I am also interested in fixing this issue, any news about this?

[yildiraymeric]

We have the same problem, hoping a fix coming soon..

[XhmikosR]

@scttcper do you need something from us to land this? Bootstrap 4 is close to EOL.

[siovene]

Adding my voice to the chorus.

[scttcper]

🎉 This issue has been resolved in version 16.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[XhmikosR]

@scttcper would it be possible to backport the bootstrap5 support in v14.x and v15.x too?

[siovene]

@scttcper thanks! Something must've gone wrong with the NPM release tho.

I installed 16.0.0 and toastr-bs5-alert.scss doesn't exist.

To be sure, I removed my node_modules, did npm install, checked that node_modules/ngx-toastr/package.json mentions version 16.0.0, and toastr-bs5-alert.scss doesn't exist.

Could you have missed something? I would reopen the issue but it looks like I can't.

$ grep toastr package.json
    "ngx-toastr": "16.0.0",
$ grep version node_modules/ngx-toastr/package.json 
  "version": "16.0.0",
$ find node_modules/ngx-toastr -name '*.scss'
node_modules/ngx-toastr/toastr-bs4-alert.scss

Thank you!

[siovene]

Thanks, I see now that it's fixed in 16.0.1.

[mikeandtherest]

@siovene @scttcper The issue is indeed fixed in 16.0.1, but on the other hand ngx-toastr 16.0.1 throws errors when used with angular versions prior to v15. Does it work for you on angular v13 or v14 projects?

---

Steps to reproduce:

1. create a new angular 14 project (I'm on angular 14.2.10)
2. add ngx-toastr to it (npm i ngx-toastr which installs ngx-toastr 16.0.1)
3. add ToastrModule to AppModule:
   ToastrModule.forRoot({
   preventDuplicates: true
   }),
4. use ToastrService inside AppComponent
5. when running npm start we'll get the errors below:

[scttcper]

latest version only works with 15 see the table https://github.com/scttcper/ngx-toastr#dependencies @mikeandtherest

[mikeandtherest]

@scttcper That's what I figured before the table was updated. But still, ngx-toastr 15.2.2 doesn't have this issue fixed, i.e. toastr-bs4-alert.scss is still with errors and I can't import toastr-bs5-alert.scss, since it's not found.

So unless I'm migrating to angular 15 (which is not possible unfortunately on our project), I'm out of ideas on how I can use the fix from ngx-toastr 16.0.1 on an angular 14 project.

[scttcper]

Just copy paste the css

[Hetvip17]

🎉 This issue has been resolved in version 16.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

hey @scttcper, I am still facing the same issue even after updating to version 16.0.0 . I am using angular 15