0

I probably got into deadend. I'm trying to override bootstrap scss $primary variable with own one that I load into a component through a service from external JSON config file (content of this file can vary).

The straightest solution that came to my mind was like this:

ComponentStyles.scss

$primary = {{variableLoadedFromConfigFile}};

Previous solution was static

$primary = blue;

and now I need to change it to dynamic behavior (in sense of loading that value from file).

Is this even possible?

Thanks.

Frimlik
  • 357
  • 3
  • 15
  • Are you trying to override a material class or something like that? you need to provide more information, your question lacks information. – Bargros Mar 29 '21 at 10:48
  • @Bargros I edited my question, hope it is more clear now. – Frimlik Mar 29 '21 at 11:03
  • Sorry I'm still not getting what you're trying to say, it sounds to me like you need to define your own palate, if so read this answer [create palate theme](https://stackoverflow.com/questions/41440998/how-can-i-use-custom-theme-palettes-in-angular) – Bargros Mar 29 '21 at 12:45

2 Answers2

0

The way I have found to inject custom CSS files at runtime is with <link /> element inside my components.

An implementation of this is the above:

HTML

<link rel="stylesheet" [href]='cssUrl'>

TS

cssUrl: SafeResourceUrl;

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  this.cssUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`assets/my.css`);
}

PS: You should put the file you want to inject inside your assets in the Angular.json.

PS2: Be aware of caching Issues.

After Question Edited

The Angular way to update dynamically CSS is using NgStyle directive. Or to use HTML interpolation in [styles].

You can not use interpolation in CSS files.

You can also create CSS links like the example a gave you and insert custom CSS files or you can use a component without encapsulation to inject some CSS to the HTML body.

StPaulis
  • 2,844
  • 1
  • 14
  • 24
  • I'm afraid I wasn't clear enough. I do not need to load another css but load that variable from JSON and somehow insert it into styles. – Frimlik Mar 29 '21 at 11:05
0

At the end I solved it by loading values from json directly to scss with node-sass-json-importer as it is described here.

Frimlik
  • 357
  • 3
  • 15