0

Tengo un proyecto el cual comencé con ng new proyecto --routing --style=scss para poder utilizar SCSS.

La estructura de mi proyecto es algo como esto:

src/
..app/
....componentes/
......componente1
......componente2
....servicios/
......servicio1
....shared/
......componente1
......componente2
..assets/
....img/
....scss/
......base/
........archivo.scss
......utilities/
........archivo.scss
......main.scss
..styles.scss

Dentro del archivo assets/scss/main.scss importo los archivos que tengo en los directorios de SCSS. Ejemplo:

@charset "utf-8";
@import "base/index";
@import "utilities/index";

Dentro de base/index tengo algo como:

@charset "utf-8";
@import "colores.scss";
@import "fonts.scss";

Dentro de colores.scss tengo variables como $rojo: red;.

Esto funciona bien, pero cuando quiero comenzar a escribir código scss de algún componente; por ejemplo, el src/componentes/componente1/componente1.scss tengo que comenzar el archivo importando el archivo src/styles.scss

Lo que me deja algo como esto:

@import '../../../styles.scss';

Mi problema es que si tengo más niveles en mis directorios tengo que cambiar los /../ para que pueda utilizar el archivo. Leí en este enlace que se puede utilizar algo como lo siguiente:

@import '~sass/variables';

(Pero no me funciona) Me gustaría utilizar algo similar, para no tener que importar el archivo src/styles.scss en cada una de mis hojas de estilo, o por lo menos no tener que preocuparme de la ruta con /../.

4
  • ¿Tienes el archivo importado en el angular.json? el 28 dic. 2018 a las 21:49
  • Lo intenté pero tampoco me funcionó ¿Lo tendría que hacer por ahí?
    – akko
    el 28 dic. 2018 a las 21:58
  • Normalmente los archivos de estilos siempre deben ir bajo el array styles y siempre de ultimo, eso es porque asi evitamos utilizar la eliminación del Encapsulación de Vistas. Si no hay otro remedio, propongo que leas sobre :host::ng-deep, aunque deprecados, funcionales. el 28 dic. 2018 a las 22:01
  • Lo voy a checar. Muchas gracias.
    – akko
    el 28 dic. 2018 a las 22:05

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.