Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Adding/Removing plugins CSS, Sweetalert2 in particular in Vue


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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)


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";


Theme main mandatory style import is @import "assets/sass/style";, other style imports are not mandatory remove them depending on plugins you are planning to use.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



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


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(