[Vuejs]-Vue: Importing SCSS only if a component gets created

by

0👍

✅

After some more trial and error, the only way I found that worked was to dynamically import the styles from a CDN to the HEAD element once the component gets created. Like so:

created() {
  this.inject_material_fonts_and_icons_into_header()
},
.
.
.
methods: {
inject_material_styles_into_header() {
  [
    "https://unpkg.com/vue-material@beta/dist/theme/default.css",
    "https://unpkg.com/vue-material@beta/dist/vue-material.min.css",
    "https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons"
  ].forEach(route => {
    const link_el = document.createElement("link")

    link_el.setAttribute("rel", "stylesheet")
    link_el.setAttribute("href", route)

    document.head.appendChild(link_el);
  })
}
}

If anyone has better suggestions, please dont hesitate to add them. I am not happy with relying on CDNs, but at this point, I cant spend more time on this issue.

Leave a comment