1

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.

Denis Valdenaire aka Joe Linux
  • 312
  • 1
  • 2
  • 11

2 Answers2

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/theme-bootstrap-4@5.0.10/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

Tech
  • 156
  • 1
  • 14
0

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

<link rel="stylesheet" href="@sweetalert2/theme-bootstrap-4/bootstrap-4.css">
Limon Monte
  • 52,539
  • 45
  • 182
  • 213