CODEWITHSUNDEEP
angularsasscomponents
Douwe de Vries
Douwe de Vries

Reputation: 101

Prevent SCSS processing when building angular library

For themeability purposes, we would like to be able to change SCSS variables in our Angular component library in the consuming app.

Is it possible to keep our component library from processing the SCSS in to CSS? Or is there a better way of achieving what we want?

Upvotes: 4

Views: 518

Answers (1)

Athanasios Kataras
Athanasios Kataras

Reputation: 26450

SCSS is not a language that browsers understand. So at the end of the day, the sccs will be converted to CSS.

It's also a very bad practice, even if you could, to export the scss from the library and build it. It violates plenty of practices.

The thing is though, that scss is being build along with your application anyway.

You could go through many ways. You can create a set of themes in you app following one of the many guides around the web. (check one example here)

Or you could go the angular material way. Check how they handle themes here: angular material themeing

The first one is easier than the second. The second one, supposes that you have all your styles in mixins and when you build them then the theme related variables apply.

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

// Include theme styles for your custom components.
@include candy-carousel-theme($theme);

Upvotes: 2

Related Questions