App.vue掛載后動態添加css主題？

Question

我正在嘗試在 Vue3 項目的根組件App.vue中全局添加 CSS 主題文件。 我必須將其作為組件道具進行處理（我無法更改此行為，因為 css 文件可以動態更改，並且每次再次掛載時我都需要處理此更改），因此鏈接將在整個應用程序完成后可用安裝。

我一直在嘗試在App.vue中實現這一點，並將其附加到 header 一個<link>標記，但我得到的MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 即使我指定了text/css類型也會出錯：

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>

有沒有辦法做到這一點？ 我想我什至可以在應用程序安裝階段之前獲得這個主題 url，但我不知道是否以及如何告訴 Vue 在全球范圍內使用它。

Answer 1

此處描述的解決方案的改編可能會滿足您的需求。

• 在生命周期掛鈎中獲取主題文件 (mounted())
• 閱讀其內容
• 使用相應的 querySelector 應用樣式

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