0

estoy trabajando con angular4 y no encuentro en ninguna web o foro, una forma eficiente de usar un precompilador css (sass, less o stylus) junto con los estilos modulas de angular4. Es decir , quiero que mi aplicacion siga teniendo estilos propios y unicos que solo se carguen en ciertos componentes y que ademas estos estilos, usen variables definidas en un fichero principal.

¿Es posible hacer esto de una forma eficiente, sin tener que cargar cada uno de los estilos modulares de cada componente mas los ficheros de variables, etc, por cada estilo de mi aplicación? .

2
  • Buenas, Estás usando angular-cli?
    – KN_
    Commented el 23 jun. 2017 a las 17:51
  • Si y de momento a nivel de modulo no tengo problema, el problema es a la hora de definir estilos globales como por ejemplo variables de colores, tamaños ... etc. Existe una forma predefinida o recomendada. Commented el 21 ago. 2017 a las 7:09

1 respuesta 1

2

Vengo peleando con este mismo problema hace un tiempo y todos parecen resolverlo a través de los imports.

O sea, dentro del estilo de un componente, deberías hacer:

// Archivo: prueba.component.styl

@import '../estilos/comunes/colores'

p
  color color-azul-electrico // Definido dentro del archivo colores.

Sin embargo, esta solución, a parte de que no es tan linda como uno espera, tiene algunos problemas molestos: Cada vez que quieras mover la ubicación de los estilos de tus componentes o de tus estilos generales, si tu IDE no lo maneja, vas a tener que actualizar todos los imports.

Para evitar esto, y de paso ahorrarte unos cuantos caracteres, puedes colocar dentro del archivo .angular-cli.json, dentro del objeto apps lo siguiente:

"stylePreprocessorOptions": {
  "includePaths": [
    "estilos/comunes"
  ]
},

Ahora, todos los archivos que estén dentro de esa carpeta comunes podrás importarlos dentro de los estilos de tus componentes de esta forma:

// Archivo: prueba.component.styl

@import 'colores'     // Sigue el import... Pero al menos más cortito.

p
  color color-azul-electrico

De todas maneras, si quieres usar un path relativo a tus estilos globales, puedes seguir haciéndolo.

Nota: Esta solución de usar stylePreprocessorOptions solo funciona con los preprocesadores de estilos SASS y STYLUS.

Pareciera ser que aún no hay una mejor solución hasta este momento...

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.