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...