StylePreprocessorOptions pozwala na dynamiczne dodawanie stylów do aplikacji. Zamiast używać relatywnych ścieżek do pliku ze stylami:

// Relatywna ścieżka
@import 'libs/feature-theme-A/src/style/palette';

można zaimportować style w taki sposób:

// Po dodaniu stylePreprocessorOptions, można tak:
@import 'palette';

Co to daje? Załóżmy, że mamy aplikację A oraz B, które korzystają z tych samych komponentów. Przedstawione rozwiązanie umożliwia zmianę stylów w zależności, w której aplikacji używamy określonego komponentu nie tracąc jednocześnie enkapsulacji stylów w Angularze. Możemy tak zaimportować zmienne, dodatkowe klasy czy mixiny.

Dodanie StylePreprocessorOptions w aplikacji sprowadza się do wskazania odpowiednich ścieżek w projekcie:

"stylePreprocessorOptions": {
    "includePaths": ["libs/feature-theme-A/src/style"]
}

Miłego kolorowania!

💡 "Czy wiesz, że?" to wewnątrzfirmowa inicjatywa, której celem jest szerzenie ciekawostek z różnych obszarów IT. Najlepsze z nich trafiają na bloga dla szerszego grona odbiorców.