Loading CSS bootstrap-4 theme for sweet-alert2

Question

I use SweetAlert2 for my project. I use VueJS and vue-cli-service with webpack.

As I wanted to use the boostrap-4 theme, I followed the instructions :

npm i npm install @sweetalert2/theme-bootstrap-4

And I included this css in the index.html

<link rel="stylesheet" href="@sweetalert2/themes/bootstrap-4/bootstrap-4.css">

But it only results in a 404 error, and of course, the theme is not showing. I don't seem to understand how it is supposed to work and what is wrong.

Thanks for any help.

Answer 1

As per the README of @sweetalert2/theme-bootstrap-4 you need to use

<link rel="stylesheet" href="@sweetalert2/theme-bootstrap-4/bootstrap-4.css">

Answer 2

I am not using VueJS in my project but I had a similar issue and thought I'd share my solution for others finding this question.

1. Make sure you are importing Swal from sweetalert2/dist/sweetalert2.js and not just from sweetalert as the latter will override all the styles. Docs here.
2. The docs then say you should be able to use SASS with @import 'sweetalert2/themes/dark/dark.scss'; or CSS using <link rel="stylesheet" href="@sweetalert2/themes/bootstrap-4/bootstrap-4.css">. I am not using SASS and the CSS did not work for me. Instead I just linked the style sheet from 'jsdelivr' with <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweetalert2/[email protected]/bootstrap-4.css".

If you don't want to use 'jsdelivr' you could copy/link the stylesheet from node_modules\@sweetalert2\theme-bootstrap-4\bootstrap-4.min.css