Estoy tratando de agregar un archivo de tema CSS globalmente dentro del componente raíz App.vue en un proyecto Vue3. Tengo que procesarlo como accesorios de componentes (no puedo cambiar este comportamiento ya que el archivo css puede cambiar dinámicamente y necesito manejar este cambio cada vez que se vuelve a montar), por lo que el enlace estará disponible una vez que la aplicación completa esté montado.
He estado tratando de lograr esto dentro de App.vue agregando al encabezado una etiqueta <link> pero estoy obteniendo el MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled. error incluso si especifiqué el tipo de 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>¿Hay una manera de lograr esto? Creo que puedo obtener esta URL de tema incluso antes de la fase de montaje de la aplicación, pero no sé si decirle a Vue que la use globalmente de todos modos.
Si tiene un enlace directo al archivo css, esto debería ser suficiente, asegúrese de eliminar la etiqueta cuando lo desmonte si necesita cambiar el tema. Parece que su file.type = "text/css"; es la causa del problema.
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) }También puede obtener el contenido del archivo y cargarlo en una etiqueta existente:
Con esta etiqueta en la head :
<style id="customStyle"></style>Y un comportamiento similar en su componente:
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>