CSS is automatically added to inline style.

[Stehos]

Hello, is there any real way how can I remove all inline styles and include style manually only if I want?

import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);

Includes also default styling. I tried to update the file above to prevent loading styles but without any effect. Please what exactly is needed to remove? I am asking based on the description:

// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';

Thank you.

[avil13]

Hi. What version do you use?

[Stehos]

Hi @avil13 , Vue is 2.6.12

and lib:

"vue-sweetalert2": "^4.1.1",

[avil13]

I tried to do it again in an example of this package, and everything worked as expected. If you comment on the styles, they do not connect.

https://github.com/avil13/vue-sweetalert2/blob/5aa08de7ef7a55e59d8ab0b2c0d1d762fbcc83e5/packages/example/src/main.js#L8

[avil13]

@Stehos Check if sweetalert2 is connected separately.

[Stehos]

@avil13 thank you for your reply. I have it done in the same way as you mentioned:

import VueSweetalert2 from 'vue-sweetalert2';
//import 'sweetalert2/dist/sweetalert2.min.css';
Vue.use(VueSweetalert2);

and it does not matter if i comment or uncomment import 'sweetalert2/dist/sweetalert2.min.css'; The style is inserted in the header inline style tag every time. I also checked, if there are no other css imports and nothing else is included - just sweetalert styles starting by:

<style>.swal2-popup.swal2-toast{flex-direction:row;align-items:cen

Once I uncomment import 'sweetalert2/dist/sweetalert2.min.css then you can see all styles included twice:

Thank you.

[avil13]

@Stehos is your repository private? Maybe if I could look at it, I could help. I couldn't reproduce it.

[Stehos]

@avil13 Repository is not available but it would be helpful if we can make a short call and look at it together.

[avil13]

@Stehos sorry, there will be problems with this)

[christopher4lis]

I have the same issue here when integrating w/ nuxt–seems like the styles are all being inlined by default.

[jripmeester]

Same issue here.. and just fixed it. I triggerd SweetAlert in my store action for which i import Swal from the base SweetAlert2 package this included the sweetalert2.all.js and that imported the css.

So maybe have a look if you include the SweetAlert2 package by itself somewhere.