0

I have an Angular 11 application where I use Webpack 5 and Module Federation via the components from angulararchitects for creating a microfrontend application. In order to make the animations the way I want them, I need some in scss and some in angular. To be able to have the configuration for these animations in one place (scss variablees) I would like to export them and use them them via import in my angular components. I have read several articles on how this would be possible, but since the way css modules are handled has been changed in Angular 11 and also with having a webpack.config and a custom builder by using angulararchitects I am a little bit stuck how to accomplish this.

What I have don,e so far:

  • export my variables in the scss files
  • create a typing file for the variables

Where I am stuck:

  • Where to include the typing file with ngx-builder-plus (I see there is an include of all .d.ts files but I am not sure this is enough)
  • How to set up webpack with angular 11 so that the variables get correctly exported

Any ideas or directions? Thx Markus

Markus Bio-Alexander
  • 21
  • 2

1 Answers1

0

If you want to handle conditional based styling, a better way would be to handle it dynamically by using ngClass directive. OR If your requirement is to build multiple themes based architecture then please refer SASS / SCSS MultiTheme Approach

Himanshu Saxena
  • 340
  • 3
  • 13
  • Hello, I am aware about `ngClass` and also Theming in general. But this is basically all about animations, where I need the special angular handling for enter and leave of components. For all other I want to have normal css animations, and in order to have just one set of "constants" for the different values I would need these within scss and also component ts files. – Markus Bio-Alexander Dec 23 '20 at 14:07