1

I'm trying to add a CSS theme file globally inside the root component App.vue in a Vue3 project. I have to process it as a component props (I can't change this behavior since the css file can change dynamically and I need to handle this change every time it is mounted again), so the link will be available once the whole app is mounted.

I've been trying to achieve this inside App.vue appending to the header a <link> tag but I'm getting the MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. error even if I specified the text/css type:

export default defineComponent({
  name: "Application",
  props: {
    themeUrl: {
      type: String,
      required: false,
    },
  },

  data() {
    return {};
  },
  created() {
    if (this.themeUrl) {
      console.log(this.themeUrl);
      let file = document.createElement("link");
      file.rel = "stylesheet";
      file.type = "text/css";
      file.href = this.themeUrl;
      document.head.appendChild(file);
    }
  },
});
</script>

Is there a way to achieve this? I think I can get this theme url even before the app mounting phase but I don't know if and how to tell Vue to use it globally anyway.

Barnercart
  • 1,523
  • 1
  • 11
  • 23
  • Why don't you add the CSS directly here? – kissu Jan 08 '22 at 18:24
  • 1
    @kissu what do you mean by "here"? I can only add the CSS (which for context is a bootstrap theme) from an external url (which is provided by the platform the app is deployed into) and since it may change I can't just download the resource and import globally inside the – Barnercart Jan 08 '22 at 18:29

1 Answers1

1

If you have a direct link to the css file then this should be sufficient, make sure to remove the tag when unmounted if you need to swap the theme. It looks that your file.type = "text/css"; is the cause of the issue.

  mounted () {
    const file = document.createElement('link')
    file.rel = 'stylesheet'
    file.href = 'https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css'
    document.head.appendChild(file)
  }

You could also fetch the file content and load it into an existing tag:

  • Fetch the theme file in a lifecycle hook (mounted())
  • Read its content
  • Apply the style with the corresponding querySelector

With this tag in the head :

<style id="customStyle"></style>

And a similar behavior in your component :

export default defineComponent({
  name: "Application",
  props: {
    themeUrl: {
      type: String,
      required: false,
    },
  },

  data() {
    return {};
  },
  mounted() {
    if (this.themeUrl) {
      console.log(this.themeUrl);
      fetch(this.themeUrl)
        .then(response => {
          response.text().then(content => {
            document.getElementById('customStyle').innerHTML = content
          })
        })
    }
  },
});
</script>

https://stackoverflow.com/a/68003923/4390988

srozen
  • 23
  • 5
  • Honestly I don't find this solution clean and really the answer to the problem. I just need to fetch the CSS once on every mount, not every second. Considering that adding the tag should work (there's a boilerplate in React that do this exact same thing this way) and the fact that it's failing on my hand means that there's another way to add the link ref or I'm doing something wrong. – Barnercart Jan 08 '22 at 19:03
  • I edited my answer with another solution close to what you wanted to achieve, this should solve your problem. – srozen Jan 08 '22 at 19:56
  • I've tested something similiar to what you proposed and do its job (no need to hardcode in the index head the style tag, just create a new html `style` element and add the innerHTML content directly before appending it to the head). Still, I think that appending directly a `link` tag should be the way to go (since it basically does what you're proposed under the hood I suppose). I just don't know why it doesn't get recognized as `text/css`. – Barnercart Jan 08 '22 at 20:17
  • Removing `file.type` doesn't fix the issue. – Barnercart Jan 08 '22 at 20:22
  • Then it may be related to the `themeUrl` you're passing, either the props itself or the resource associated to that url. Do you manage to make it work with the gist url I used in my example? Is `themeUrl` directly serving a CSS file like the gist url? Is `themeUrl` available when the hook triggers? – srozen Jan 08 '22 at 20:45
  • Yes, I tried pointing it directly towards a .css file with no success and it is available when entering the hook triggers. – Barnercart Jan 09 '22 at 01:04