Personalización del estilo de aplicación

Puede aplicar estilo a las pantallas nuevas en el formato .scss o modificar el estilo de una pantalla existente. Los estilos globales y comunes proporcionados por la aplicación están disponibles en la biblioteca @store/styles que está presente en el directorio <store-temp>/packages/libs/styles .

Puede modificar las variables de estilo proporcionadas por la aplicación e introducir estilos personalizados en la biblioteca @store-extensions/styles que están presentes en el directorio <store-temp>/extensions/libs/styles .

En la tabla siguiente se muestra el diseño del directorio:

Tabla 1. Personalizar el estilo de la aplicación
Vía de acceso del directorio	Descripción
extensions/libs/styles	La biblioteca se utiliza para anular las variables de estilo SASS proporcionadas por la aplicación y añadir estilos personalizados para utilizarlos en extensiones.
extensions/libs/styles/src/styles/custom_styles.scss	Defina fuentes personalizadas, imágenes y selectores en este archivo.
extensions/libs/styles/src/styles/variables_extn.scss	Los valores de variable SCSS proporcionados por la aplicación se pueden modificar y colocar en este archivo.
extensions/libs/styles/webpack.config.js	Configuración de Webpack para compilar y generar archivos css de estilo personalizado.

Puede personalizar los estilos proporcionados por la aplicación y añadir estilos personalizados.

Los casos de uso de negocio soportados incluyen:

Alteración temporal de las variables SCSS existentes
Adición de fuentes de icono personalizadas
Adición de imágenes personalizadas
Adición de selectores SCSS personalizados

Asegúrese de seguir estas directrices al personalizar el estilo de aplicación.

No altere temporalmente los selectores existentes.
No cambie la configuración existente de <store-temp>/extensions/libs/styles/webpack.config.js, excepto cuando añada nuevos plug-ins para copiar imágenes.
No cambie los scripts en <store-temp>/extensions/libs/styles/package.json.

Alteración temporal de variables SCSS existentes

Puede personalizar el aspecto de la aplicación alterando temporalmente o añadiendo nuevas variables SCSS.

Las variables proporcionadas por la aplicación están presentes en <store-temp>\packages\libs\styles\src\styles\typography\_variables.scss

Para alterar temporalmente las variables SCCS existentes, realice los pasos siguientes:

Identifique el nombre de variable SCSS proporcionado por la aplicación que desea modificar.
Los nombres de variable SCSS proporcionados por la aplicación están presentes en <store-temp>\packages\libs\styles\src\styles\typography\_variables.scss.
Copie el nombre de variable adecuado en el archivo <store-temp>\extensions\libs\styles\src\styles\variables_extn.scss y proporcione el valor adecuado en función de sus necesidades.
Verifica tus cambios.
Inicie la aplicación ejecutando el siguiente comando:
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.

Fragmento de código de ejemplo.


/* Overridding gray colour */
$gray-10: #2d74da;
$gray-10-15: #2d74da;

Creación de fuentes de iconos personalizadas

Para fuentes de iconos personalizadas, puede utilizar directamente bibliotecas de iconos de terceros o crear iconos personalizados siguiendo estos pasos:

Cree un icono personalizado como vector utilizando cualquier herramienta para generar un formato de archiv .svg, u obtenga archivos .svg de cualquier otra fuente.
Utilice los archivos .svg creados y genere las fuentes de iconos personalizadas utilizando cualquier biblioteca de iconos SVG.
Nota:
- No utilice archivos .svg que se hayan convertido a partir de archivos .png o .jpg.
- Al generar iconos de fuentes, no utilice el nombre de fuente " app-glyphicons " que proporciona la aplicación. En su lugar, utilice el nombre de la fuente personalizada.
Cree una nueva carpeta en la carpeta <store-temp>\extensions\libs\styles\src\styles\icons y copie todos los formatos de fuentes de iconos generados, como .ttf, .svg, .eot o .woff, incluidos los archivos SCSS o CSS de iconos personalizados de terceros, en esta carpeta.
Importar la fuente de icono personalizada a un archiv <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss.
Por ejemplo: @import './icons/style.scss';
Utilice el selector de clase de icono personalizado en componentes personalizados.
Verifica tus cambios.
Inicie la aplicación ejecutando el siguiente comando:
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.

Adición de imágenes personalizadas

Para añadir imágenes personalizadas para utilizarlas en las pantallas de componentes personalizados, realice los pasos siguientes:

Puede añadir nuevas imágenes en el directorio <store-temp>\extensions\libs\styles\src\styles\images .
Después de añadir nuevas imágenes a la extensión lib, puede incluir la imagen personalizada en los archivos de código fuente como HTML, SCSS o XSL utilizando la ruta relativa, como /assets/styles/images/custom-image.jpeg. Por ejemplo, <img src=“./assets/styles/images/sterling_login_dark_custom.svg”>.

Nota: Asegúrese de que los nuevos nombres de clase no entren en conflicto con los nombres de clase CSS existentes.
Verifica tus cambios.
Inicie la aplicación ejecutando el siguiente comando:
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.

Uso de imágenes personalizadas en componentes ampliados

Tras añadir imágenes personalizadas, los activos, incluidas las imágenes, se copian en la raíz de la aplicación. En función del tipo de entorno, desarrollo o producción, los activos están disponibles en distintas ubicaciones en tiempo de ejecución. Para el entorno de producción, las imágenes se copian en <store-temp>/dist/store-frontend/assets/styles/images. En caso contrario, las imágenes estarán disponibles en memoria en el directorio assets relativo a la aplicación raíz.

El proceso para cargar imágenes personalizadas varía en función del tipo de entorno. Para cargar imágenes personalizadas, siga estos pasos:

En el archivo typescript del componente, importa isDevMode del núcleo de angular, '@angular/core'. Por ejemplo:
```
import { Component, OnInit, ViewEncapsulation, OnDestroy, isDevMode } from '@angular/core';
```
Exponga una variable para contener la imagen URL, y configúrela para el tipo de entorno específico. Cuando se ejecuta el siguiente comando, la aplicación se construye en el modo de desarrollo.
```
yarn start-app
```
Cuando se ejecuta el siguiente comando, la aplicación se construye en el modo de producción.
```
yarn build-extensions
```
Por ejemplo, para cargar el archivo extensions\libs\styles\src\styles\images\custom_image.jpg , en ngOnInit() del componente, añada el siguiente fragmento de código para contener la imagen URL que debe utilizarse en el archivo HTML del componente.
```
if (isDevMode()) {

     this.imageUrl = "assets/styles/images/custom_image.jpg"

   } else {

     this.imageUrl = "../extn/store-frontend/assets/styles/images/custom_image.jpg";

   }
```
En el archivo HTML del componente, vincule la imagen URL al elemento image. El siguiente ejemplo ilustra la vinculación del atributo src .
<img [src]="imageUrl" alt="" width="50" height="50">

Adición de selectores SCSS personalizados

Para definir nuevos selectores globales para las características personalizadas, realice los pasos siguientes:

Los selectores CSS personalizados se pueden definir en <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss.

Nota: Asegúrese de que los selectores CSS personalizados no entren en conflicto con los selectores existentes.
Importe otros archivos SCCS en el archivo <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss .
Verifica tus cambios.
Inicie la aplicación ejecutando el siguiente comando:
```
yarn start-app
```
Para verificar los cambios en el kit de herramientas del desarrollador, extraiga y despliegue las personalizaciones. Para obtener más información sobre la extracción e implantación de personalizaciones, consulte Extracción de personalizaciones.