Angular. Personalizando el estilo de Bootstrap.
By ercobo | Published | No hay comentarios
Puede que a estas alturas nos estemos pensando como personalizar los colores y las fuentes de nuestra app para ir dejando cabos sueltos ya atados antes de empezar con el grueso de los componentes y demás elementos que necesitarán estilo.
En una entrada anterior, ya vimos como integrar bootstrap con angular, ahora es el momento de ver como podemos personalizar ese tema.
En este caso yo voy a optar por un tema oscuro. Para ello, en la web de https://bootswatch.com/ voy a incluir el tema «Darkly» para la app.
El método es sencillo. En la web, en el tema, nos descargaremos el archivo de mínimos de bootstrap (), y lo vamos a incluir en la carpeta «assets/css/global» de nuestra aplicación. Una vez conseguido esto, habrá que modificar el archivo «angular-cli.json» para incluirlo en la sección styles, quedando de esta forma:
|
1 2 3 4 5 6 |
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css", "assets/css/frontend/bootstrap.min.css", "styles.css" ], |
Una vez hecho esto, os podeis encontrar con errores al ser compilada nuestra aplicación. En mi caso son errores del tipo:
|
1 2 3 4 5 6 |
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./src/assets/css/frontend/bootstrap.min.css Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in 'D:\Trabajos\cartadigital\web\src\assets\css\frontend' @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./src/assets/css/frontend/bootstrap.min.css 6:4643-4695 6:472 0-4772 @ ./src/assets/css/frontend/bootstrap.min.css @ multi ./~/bootstrap/dist/css/bootstrap.css ./~/font-awesome/css/font-awesome.css ./src/assets/css/frontend/bootstrap.min.css ./src/styles.css |
Bueno, pues se trata de que no está reconociendo la fuente para poder mostrar los iconos. Ante esto la opcion es instalar la fuente con el comando npm install --save glyphicons. Despues de que se haya instalado, hay que modificar el archivo css que acabamos de instalar y modificarlo para eliminar la referencia «@font-face» que hace referencia a los archivos de la fuente Gliphicons.
Dado que la hemos incluido con el anterior npm install, a partir de este momento la fuente estará disponible para ser utilizada, y nuestra app tendra el aspecto del tema que hemos elegido.
