Overwrite scss variables doesn't work

[futbolsalas15]

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]

If you import the JS file only with bundled styles, you can't customize the SCSS variables. You have to include your own SCSS file in order to do that. Are you sure you've imported the right file in angular.json? I admit that I've never tested overriding SweetAlert's SCSS variables myself, I should try that and document it at some point.
In the meanwhile, if you're stuck, you can still override the styles with pure CSS.

[limonte]

I don't think it's possible to use/override SASS variables with ngx-sweetalert2.

In sources there is

import Swal from 'sweetalert2' 

which means

import Swal from 'sweetalert2/dist/sweetalert2.all.js' 

which means that default styles will be injected automatically.

[steve3d]

well, this is a very important problem for angular, becuase injected styles are inserted last, there is no way to override the styles, unless we add !important to every rule of override.

and this by sweetalert2's default design, sweetalert2 will use dist/sweetalert2.all.js, the only way to change this is by change "browser": "dist/sweetalert2.all.js" to "browser": "dist/sweetalert2.js" in node_modules/sweetalert2/package.json

[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.

[steve3d]

well, for now I'm using a very ugly hack, which is patch the browser content of package.json to do this.

[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]

New wiki page on this subject! https://github.com/sweetalert2/ngx-sweetalert2/wiki/Use-a-theme-from-@sweetalert2-themes-(and-or-customize-SCSS-variables)