Estoy tratando de crear una función que cambie todo el css de la página, inyectando una nueva hoja de estilo.
tengo la siguiente función:
loadCSS() { let fileRef; fileRef = document.createElement('link'); fileRef.setAttribute('rel', 'stylesheet'); fileRef.setAttribute('type', 'text/css'); fileRef.setAttribute('href', './appointment2.component.scss'); if (typeof fileRef !== 'undefined') { document.getElementsByTagName('head')[0].appendChild(fileRef); } }Una vez que el usuario haga clic en esta función, se debe aplicar el nuevo estilo css. Pero no sucede.
Recibo el siguiente error: se Refused to apply style from 'http://localhost:4200/appointment2.component.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Ya agregué la ruta a mi @Component styleUrls :
styleUrls: [ './appointment2.component.scss', './appointment.component.scss'], Incluso ya lo he agregado a mis styles en angular.json :
"styles": [ "src/app/appointment/appointment2.component.scss", "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss", "src/theme.scss", "node_modules/ngx-toastr/toastr.css" ]¿Qué estoy haciendo mal? ¿Cómo arreglar esto?
Los archivos SASS (.scss) no son archivos CSS válidos.
Primero deben transpilarse a CSS.
Esto significa que no puede usarlos directamente en su aplicación.
Intente proporcionar un archivo CSS (.css) en su lugar.
Con la gran ayuda de @temp_user , descubrí que el archivo debía ser un archivo '.CSS' y no '.SCSS'. Pero todavía tenía un problema: no se pudo encontrar el archivo (error 404 en la carga útil). Entonces, lo que tenía que hacer (además de cambiar el formato del archivo) era mover el archivo al directorio /assets y después de esto. Todo funcionó bien.
Entonces, mi código terminó así:
loadCSS() { let fileRef; fileRef = document.createElement('link'); fileRef.setAttribute('rel', 'stylesheet'); fileRef.setAttribute('type', 'text/css'); fileRef.setAttribute('href', '../../assets/dynamicStyles/appointment2.component.css'); if (typeof fileRef !== 'undefined') { document.getElementsByTagName('head')[0].appendChild(fileRef); } }Con este código, puedo cambiar el estilo completo de mi página, en cualquier momento que lo necesite.
NOTA No es necesario agregar la ruta del archivo en "estilos" dentro de angular.json , ni en @Component dentro de mi app.component.ts