Swal 8.x.x doesn't show correctly (styles are missing)

Current behavior

Hi ! We’re trying to fire a swal in an angular app.
I’ve just downloaded the latest version of sweetalert2 (8.0.1) from npm and imported it in my angular componenent (angular 6 with typescript). Then i tried to fire the swal in ngOnInit() with a code snippet taken from sweetalert2 website, however, the swal doesnt popup, swal’s html elements are rather added to the DOM, without being styled :

We are using the standard sweetalert2 library, not ngx-sweetalert2, and it seems to be a problem with version 8 only, because rolling back to version 7.33.1 fix this issue.

Note that, I’ve not tested v8.0.1 without using angular or using ngx-sweetalert2.

Expected behavior

The sweetalert should appear normaly, as it’s demonstrated on sweetalert’s website.

Live demo

Here’s the code of my component :

import { Component, OnInit } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    Swal.fire(
      'Good job!',
      'You clicked the button!',
      'success'
    )
  }
}

[limonte]

Hello! I am using SweetAlert v11.4.4 with Vite and React on the latest version and the styles are not added to the header. I had to use import as Limote suggests and it worked

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

This would work, but here’s a slightly better solution:

import Swal from 'sweetalert2'
import 'sweetalert2/dist/sweetalert2.css'

[limonte]

Here’s how I solved it for sweetalert2-webpack-demo:

webpack.config.babel.js:

module.exports = {
  ...
  resolve: {
    mainFields: [
      'main',
      'module'
    ]
  },
  ...
}