Vue: Importing SCSS only if a component gets created

Question

I am trying to import Material SCSS only for my Admin component.

This works fine when developing locally, but once I deploy my site to Firebase hosting, the Material styles get applied to all of my SPA, including the Client side.

I have tried:

// Importing the SCSS files within the Admin component ID
  #admin {
    @import "../../../../node_modules/vue-material/dist/vue-material.min.css";
    @import "../../../../node_modules/vue-material/dist/theme/default.css";
  }

then

// Importing the SCSS files within the Admin component CLASS
  .admin {
    @import "../../../../node_modules/vue-material/dist/vue-material.min.css";
    @import "../../../../node_modules/vue-material/dist/theme/default.css";
  }

then I tried it within the component itself

// Importing the SCSS files within the Admin components beforeCreate lifecycle hook
  beforeCreate() {
    // Ensuring style files only get loaded if this component is used
    import("vue-material/dist/vue-material.min.css")
    import("vue-material/dist/theme/default.css")
  },

and finally:

// Importing the SCSS files within the Admin components, which is only rendered if in the
// main App component its v-if is true.
<script>
.
.
.
import "vue-material/dist/vue-material.min.css"
import "vue-material/dist/theme/default.css"
.
.

I thought it might be because of some cache in the browser, however I have tried hard reloading Chrome and tried multiple different browsers, but the problem persist.

Furthermore, I have tried commenting out the CSS imports and re-deploying, this did work. So the problem is somewhere within the Admin component that how it imports and loads the styles.

Also the weird thing is that I have added a console log in the created hook of the component, just to check if it gets created even if it shouldnt, and it doesnt. So I have no idea how the styles are getting in. I think they get mixed in with all the rest within the build process.

I am sure there is a simple solution to it, but I have run out of mine.

(Note: assuming you use `webpack`) Please make sure they are not already loaded by other modules (scripts). Also take note that once the CSS module is imported you can't unload it. — Jin-oh Kang, Jan 26 '20 at 10:11
I have added a new edit: Furthermore, I have tried commenting out the CSS imports and re-deploying, this did work. So the problem is somewhere within the Admin component that how it imports and loads the styles. So I am sure its not caused by a double import. @Jin-ohKang — Jousi, Jan 26 '20 at 10:36
All the code you posted seems just fine. There's perhaps something wrong with build configuration, and I have never really worked with Firebase. — Jin-oh Kang, Jan 26 '20 at 11:00
Please check out https://stackoverflow.com/questions/49653931/scope-bootstrap-css-in-vue This is the same use-case, but with bootstrap scss instead of material. You can probably use the exact same solution described there. — Leon, Jan 26 '20 at 11:05
This isnt going to work as it gets bound only to `admin` class and not the rest of the elements within. — Jousi, Jan 26 '20 at 11:18

Jousi · Accepted Answer · 2020-01-26T11:33:35.737

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.

Jousi, would you be willing to take a look at another Vue Material question? https://stackoverflow.com/questions/59952741/how-to-set-up-flexible-grid-in-vue-material — JS_is_awesome18, Jan 28 '20 at 16:59

Vue: Importing SCSS only if a component gets created

1 Answers1