Overwrite scss variables doesn't work

When I try to overwrite the SCSS variables for the sweetalert2.scss file, it doesn’t work.

I have my .scss file in this way:

$swal2-confirm-button-background-color: #a12125; // like red color
@import '~sweetalert2/src/sweetalert2';

I have the module config in this way:

@NgModule({
  imports: [
    CommonModule,
    SweetAlert2Module.forRoot({
      buttonsStyling: false //even without this, it doesn't work 😔
    })
  ],
  declarations: [PopupComponent],
  entryComponents: [PopupComponent]
})

And the component (HTML):

<swal
  #swalDialog
  title="{{ title }}"
  text="{{ text }}"
  type="question"
  [showCancelButton]="true"
  [focusCancel]="true"
  (confirm)="confirmButtonClicked()"
>
</swal>

However the Sweetalert is showed without changes in the colors:

I checked Sweetalert2 issues, and they advise that you must import the js file instead of from barrel file, but in ngx-sweetalert2 I don’t know if we can do that (reference: https://github.com/sweetalert2/sweetalert2/issues/1137#issuecomment-400239982).

Thanks!.

[toverux]

Hello! Good news! v6.0.0 is out and allows you to load an arbitrary build of SweetAlert2, here we’re interested in the unstyled one.

To use a theme, import SweetAlert2 like this:

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

// the function must be outside of @NgModule and exported or the AoT compiler complains
export function provideSwal() {
    return import('sweetalert2/src/sweetalert2.js'); // instead of import('sweetalert2')
}

@NgModule({
    imports: [
        SweetAlert2Module.forRoot({
            provideSwal
        })
    ]
})
export class AppModule {
}

Here I’m importing SweetAlert2 directly from the original source. If you want to be safer you may want to choose to import from the prebuilt sweetalert2/dist/sweetalert2.js bundle instead.

Then, import the theme you prefer, for example, in SASS:

@import '~@sweetalert2/themes/borderless/borderless';

Or in your angular.json:

"styles": [
  "node_modules/@sweetalert2/themes/borderless/borderless.css" // or .scss if you have SASS enabled
],

[toverux]

Actually, it is also possible to override to which file ^sweetalert2$ resolves in your webpack configuration and replace it with the unstyled one. The problem is that today, Angular CLI hides the webpack config behind angular.json. You can have a custom setup that lets you modify it, but I’ll not document that here.

And yes indeed, this was a very conscious choice. Back in the days, sweetalert2 did not inject styles by default, and we were regularly getting issues with people forgetting to include the SCSS/CSS, despite it was documented. This ceased since when we started producing a JS build embedding the styles.

If I can find time and motivation to release a new version of ngx-sweetalert2 soonish, I will address this problem by letting you pass the sweetalert2 module yourself in the module configuration, so you’ll be able to pass the unstyled JavaScript instead and use the SCSS sources.