3

Tengo un problema grandecito... No me carga la hoja de estilos Bootstrap debido a un problema del MIME.

¿Qué puedo hacer para solucionarlo?

Ojo, ya estuve investigando y al parecer es el tipo de versión de CLI.

Corríganme si estoy mal, pero no puedo solucionarlo.

Help!

Éste es el error que me genera:

"Refused to apply style from 'http://localhost:4200/vendor/bootstrap/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

6
  • Hola, por favor sería mas fácil ayudarte si nos pegas aquí tus mensajes de error lo más completos posibles, al menos las partes que parezcan tener información concreta del error. Sino te estaremos haciendo mil preguntas u observaciones que no te servirán de nada. Mientras más información del error nos des más rápido te ayudaremos.
    – Julio Lago
    el 9 ago. 2018 a las 13:46
  • Hola, gracias, ya edité la pregunta.
    – Yarizza
    el 9 ago. 2018 a las 13:57
  • Vale, creo que tengo algunos indicios, podrías decirme dónde (en qué archivo) agregas tu referencia a bootstrap.css y cómo lo haces (código)? Por ejemplo algo como <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"> o tal vez lo haces dentro de angular-cli.json, etc. Eso necesito saber.
    – Julio Lago
    el 9 ago. 2018 a las 14:22
  • Al principio lo hacía directamente desde el HTML, pero ahora con la actualización que hice del CLI no sé si provenga directamente del angular.json... Cabe mencionar que hice actualización y antes me encontraba en la versión 5 y algo, la última. Y a partir de entonces me surgió éste problema.
    – Yarizza
    el 9 ago. 2018 a las 14:48
  • <link href="css/business-casual.min.css" rel="stylesheet">
    – Yarizza
    el 9 ago. 2018 a las 14:48

4 respuestas 4

5

Una solución sencilla es importar bootstrap de manera indirecta: en tu fichero ./src/styles.scss puedes añadir una línea:

@import "../node_modules/bootstrap/scss/bootstrap";

Y Bootstrap se compilará directamente desde su código fuente.

Incluso, dando un paso más, podrías no incluir todo bootstrap, importando las partes que vas a usar y eliminando las que no.

Por supuesto esto implica que tienes Boostrap como dependencia en package.json.

3

debes de instalarlo directamente con las funciones que te ofrece npm npm install bootstrap y adjuntarlos en el archivo angular.json de la siguiente manera (En la sección del array de estilos):

"styles": [
            "src/styles.scss",
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
          ],

El problema radicaría en que al momento de tratar de usar todas las funcionalidades que te ofrece Bootstrap te harías un lío, porque requieres usar los distintos complementos de JavaScript de la librería:

Ejemplo

En general es mejor evitar el uso de jQuery en una aplicación con Angular: Si la aplicación usa un nav que no existe en la pantalla de login, jQuery/Bootstrap no le añadirá el comportamiento porque no existe cuando el evento "onload" se lanza. O si un elemento desaparece del DOM y luego se genera de nuevo, perderá todo el comportamiento añadido por jQuery/Bootstrap. -Pablo Lozano

O puedes instalar la librería de ng-bootstrap que es muy buena porque se enfoca precisamente en que sea compatible con Angular sin la necesidad de usar Javascript para ejecutar ciertas funciones. Lo instalas con el siguiente comando:

npm install --save @ng-bootstrap/ng-bootstrap

Aquí tienes la documentacion: ng-bootstrap

6
  • 1
    Veo que el comentario te pareció útil :) el 9 ago. 2018 a las 15:44
  • Claro, estamos aquí para aprender de todos. Gracias!
    – jecorrales
    el 9 ago. 2018 a las 15:57
  • Hice todo lo que me dijeron y sigue sin funcionar, ¿qué otra cosa puedo hacer? ¿Hay modo de reinstalar el CLI pero a una versión antigua?
    – Yarizza
    el 9 ago. 2018 a las 16:21
  • Has probado de pronto en cambiar de navegador? o borrar las cookies del navegador en el que estés trabajando? @Yarizza o puedes adjuntar el código que hayas implementado en tu configuración. Debemos ir descartando, así que sería bueno más información de la estructura de tu proyecto.
    – jecorrales
    el 9 ago. 2018 a las 16:39
  • Porque también puede ser que tengas: <base href="./"> cuando debería estar <base href="/"> en tu archivo index.html de tú proyecto. ó puede ser que el nombre de tu librería esté mal escrito, si fuese el archivo esperado style.css y tuvieses styles.css, como ejemplo.
    – jecorrales
    el 9 ago. 2018 a las 16:47
1

angular-cli.json (Se encuentra en la raíz de tu proyecto) debes colocar la ruta de tu bootstrap en la parte de script y styles como se ve en la imagen introducir la descripción de la imagen aquí

Espero te sirva.

1

Sólo para comentarles a todos que por fin encontré un método que me funcionó. Bastó con importar dentro del archivo 'styles.css' la librería bootstrap, ¡y vóila!

@import "vendor/bootstrap/css/bootstrap.min.css";

¡Saludos a todos! Y muchas gracias.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.