Precompiler css (use of variables) in Angular4

Question

Precompiler css (use of variables) in Angular4

Navigation

#1 by (2 votes)

0

I'm working with angular4 and I can not find in any web or forum, an efficient way to use a css precompiler (sass, less or stylus) along with modulo styles of angular4. That is, I want my application to continue having its own unique styles that are only loaded in certain components and that, in addition to these styles, use variables defined in a main file.

Is it possible to do this in an efficient way, without having to load each of the modular styles of each component plus variable files, etc, for each style of my application? .

javascript css angularjs

asked by Victor Busquets Boro 22.06.2017 в 21:02

source

1 answer

Apply the text-decoration style only for :: after 'Can not read property' length 'of undefined' nodeJS

score 2 · Answer 1

I have been fighting with this same problem for a while and they all seem to resolve it through the imports .

That is, within the style of a component, you should do:

// Archivo: prueba.component.styl

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

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

However, this solution, apart from not being as nice as you expect, has some annoying problems: Every time you want to move the location of the styles of your components or your general styles, if your IDE does not manage, you'll have to update all the imports.

To avoid this, and in the meantime save a few characters, you can place the following in the .angular-cli.json file, inside the apps object:

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

Now, all the files that are inside that comunes folder you can import them within the styles of your components in this way:

// Archivo: prueba.component.styl

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

p
  color color-azul-electrico

Anyway, if you want to use a path related to your global styles, you can continue doing it.

Note : This use%% co solution works only with SASS and STYLUS style preprocessors. >

It seems that there is still no better solution until now ...