Hello, I'm using Vue version of Metronic 8.1.6 and am trying to add sweetalert2 to my app. It works but its native CSS is missed, so alerts are not styled.
I see there is a file \src\assets\sass\core\vendors\plugins\_sweetalert2.scss but apparently it's not globally enabled.
The question is: where is the proper place to add third-party CSS globally? I also interested to remove unused plugins with their CSS references in the bundling, if there are some.
Hi Lauris,
Thanks. I added this import as you suggested and it works.
The question then, if all plugin styles must be simply imported directly from node_modules, as with this example, what all these entries are for?
in App.vue:
@import "assets/sass/plugins";
in assets/sass/pugins.scss file:
@import "./core/vendors/plugins/plugins";
in the folder src\assets\sass\core\vendors\plugins:
_plugins.scss
_plugins.vue.scss
_plugins.react.scss
_plugins.angular.scss
... and all other plugin scss files
Hi Nick,
assets/sass/plugins.scss mostly contains our custom styles to override plugin default styles.
Since we are using the same style base for all our Metronic versions you see those react and angular style files, you can delete them.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
okay but please clarify how these react, angular and vue files work? I don't see any references to them. It seems they are not effective anyway by default.
Did you mean I have to rename one of these files into _plugins.scss?
If yes:
_plugins.scss contains maximum amount of styles to override, while framework-specific files have limited amount of entries. Does it mean you don't recommend to override some styles in the specific framework, if they are not included in respective file?
Hi Nick,
Sorry for the delay in reply.
Yes, by default, we are using _plugins.scss which contains maximum amount of style imports.
Freamwork specific files contains only plugin imports used in framework. Since many users are adopting plugins from our html version we enabled _plguins.scss by default, you can modify this files up to your requirement.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
OK, great, thanks.
Hi Nick,
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Nick,
We are importing all global styles inside file src/App.vue and sweetalert2 styles should already be imported there.
Inside src/App.vue you should have this import.
@import "~sweetalert2/dist/sweetalert2.css";
@import "assets/sass/style";
, other style imports are not mandatory remove them depending on plugins you are planning to use.