2

Tengo instalado bootstrap en un proyecto de angular con angular-cli y necesito cargar el archivo bootstrap.min.css desde el archivo index.html con la etiqueta LINK.

Al correr la aplicación el archivo boostrap.css no se carga en el navegador sino que me lanza un 404 Not Found. La ruta que le doy es node_modules/bootstrap/dist/css/bootstrap.min.css.

¿Alguien me puede decir si se pueden cargar archivos CSS que estén dentro de un modulo (En este caso: node_modules/bootstrap) desde dentro del index.html con la etiqueta LINK u obligatóriamente hay que referenciarlos desde styles.css o .angular-cli.json->apps->styles? .

3 respuestas 3

1

En el archivo angular-cli.json agrega:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
3
  • Lo que deseo saber es si se puede pueden cargar desde el index.html el 20 jul. 2017 a las 15:59
  • No se puede, al compilar se crea una carpeta (por lo general /dist) en la raíz del proyecto, el root de la aplicación viene siendo esa carpeta, eso quiere decir que si vas a localhost:8080 el archivo html que se sirve es el que está ubicado en /dist/index.html, lo que está fuera de la carpeta generada en la compilación no debería ser leída por el usuario. el 20 jul. 2017 a las 21:17
  • Si se puede cargar en el index dejo mi respuesta a bajo
    – SoftMolina
    el 31 jul. 2017 a las 14:10
0

Puedes cargar Bootstrap desde una etiqueta link en el archivo index.html directamente desde un CDN de esta forma:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Esto tiene la ventaja de que la cantidad de datos que se envíen desde tu servidor al cliente será menor. Traducido, menor tiempo de descarga. Como extra, al ser tan común que las páginas usen Bootstrap, es probable que el usuario pueda tener ya cacheado este archivo. La principal desventaja para no hacerlo, es que durante el desarrollo podrás sufrir aumentos de tiempo de carga. Traer información de internet es más lento que traer información local.


En todo caso, si quieres servirlo desde tu servidor, es mejor que instales Bootstrap dentro de tu proyecto para que Angular se encargue de minificarlo junto a todos tus estilos.

Para hacer esto; puedes abrir una terminal desde la carpeta en donde está ubicado tu proyecto y ejecutar npm install bootstrap --save. Y luego hacer lo que dijiste, colocar dentro de "styles" dentro del archivo angular-cli.json:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Otra opción similar, sería usando ng2-bootstrap.


Si quieres servir tu propio archivo de Bootstrap desde tu servidor porque modificado el mismo, esto es una mala práctica. Ya que cuando quieras regenerar tu proyecto desde las dependencias, se regenerará usando la versión original de bootstrap perdiendo todos los estilos que modificaste en ese archivo. Si quieres modificar algo de bootstrap, es mejor pisar sus estilos en los archivos CSS de tus componentes, o en tus estilos globales.


Si de todas formas, quieres servir tu versión modificada de Bootstrap desde tu proyecto, puedes hacerlo como dijiste, importándolo dentro de tus estilos globales:

@import '~/bootstrap/dist/css/bootstrap.min.css';

Siempre y cuando lo tengas instalado en tu proyecto.


Como última, y peor opción; sí puedes referenciar en un link tu archivo bootstrap local. Tienes que tener en cuenta que de esta forma estarás exponiendo al público la estructura de tu servidor. Algo que representa una posible gran falla de seguridad. Sin embargo, aún entendiendo los riesgos y las nulas ventajas que presenta hacerlo así, sería como creo que ya probaste:

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />

Lo que tienes que tener en cuenta acá, es que esto depende de la estructura de tu proyecto. Por lo tanto, la cantidad de carpetas que deberás subir para encontrar la carpeta node_modules (Cantidad de ../ en el href), dependerá de la ubicación de tu archivo index.html. Rompiéndose tu proyecto cada vez que decidas cambiar la ruta del mismo.

En caso que te esté dando errores 404, puede ser debido a que no estás referenciando correctamente a tu archivo Bootstrap.

0

Puedes usar el CDN de bootstrap entre las etiquetas HEAD agrega el siguiente link:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Con esto ya podras usar bootstrap en tu sitio CDN.

La otra opción es instalar bootstrap en tu proyecto, con el comando npm install bootstrap dentro la carpeta de tu proyecto ejecutarlo desde la consola, en la carpeta node_modules veras que ya se encuentra la carpeta de bootstrap, y en el archivo angular-cli.json agregar la referencia en styles "styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css" ]

y listo podras usar bootstrap en tu sitio.

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.