Css Global - Ionic v4

En este post vamos a crear un CSS Global para todas las paginas de nuestro proyecto y así evitar tener que poner codigo css en cada pagina que tengamos.


Esto nos ahorrara mucho tiempo al querer editar algo, ya que si tenemos 10 paginas y necesitamos cambiar el color de fondo tendríamos que ir css por css e ir cambiando una linea de código y eso quita tiempo, ahora imagínate tener una aplicación con 20 paginas o mas.

Ahora bien lo importante:

Para empezar lo que debemos hacer es crear una carpeta llamada CSS dentro de APP y dentro de esa carpeta un archivo llamado global.page.scss o como quieran llamarle.

En la carpeta APP están todas nuestras paginas, servicios y demás.

Ya con esto podemos empezar a agregar código de estilos a nuestro archivo global.

Lo siguiente que hay que hacer:

Nos iremos a la carpeta de nuestra pagina que vamos a enlazar al css global, nos saldrán estos 4 archivos.

Nos iremos a bitacora.page.ts en su proyecto se llamara como ustedes le hayan puesto.

Una vez abierto el archivo nos iremos a esta parte

y en styleUrls: [ ]  Aquí pondremos la dirección de donde esta nuestro css global, si siguieron todo tal cual dije, la ubicación del global css debe estar así:

../../css/global.page.scss

Por lo tanto esa parte debe quedar así:

styleUrls: ['../../css/global.page.scss'],

Ya solo tienen que hacer esto en todas la paginas y listo!