How to use an injected string as part of the path in a URL within CSS (in Angular)

Question

I have a library that allows you to inject a base-href value for your specific app so that the lib's assets (which you're hosting as an npm dependency in your app) can be accessed without a proxy. This works in most cases, except I can't figure out how to use that injected value in CSS to do this:

$fonts: '#{<injected base path here>}/fonts';

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'),
    url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff2') format('woff2'),
    url('#{$fonts}/roboto-v18-greek-ext_cyrillic-ext_latin-ext-300.woff') format('woff');
}

The problem is the URL needs to resolve at build time, so this code won't compile.

2 notes:

I'm using Angular with injection tokens.
In my case, in the scss file, I tried $fonts: '#{var(--asset-base-path)}/fonts'; and in the component.ts file, I tried:

@HostBinding('style.--asset-base-path') assetBasePath = '';

constructor(@Inject(LIB_ASSET_BASE_PATH) path: string) {
    this.assetBasePath = path
}

there is no string interpolation in css. I believe you should use base href to prepend something to all of your assets/source code, not a library — Andrei
– Andrei, Commented Sep 27, 2024 at 21:20
I answered something similar in another question (stackoverflow.com/questions/78790381/…) there is an stackblitz example, perhaps it could help or give you an idea. — Oscar Ludick
– Oscar Ludick, Commented Sep 27, 2024 at 23:30

Ethan G · Accepted Answer · 2024-10-05 00:42:56Z

1

No, This can not be done by DI. DI(Depedency Injection) is a run-time behavior, when Angular initiate a component after application runs, the DI system will create and injecting the depedencies for that component.

CSS Preprocessor such as Sass/Scss/Less will be compiled to pure css files (Since browser only accepts css, not Sass/Scss/Less) and all variables in style files must be evaluated after build. which means you css code has no dynamic behavior at run-time.

The only way to achive your requirement is to use JavaScript to operate styles and set the font path at run-time.

EDIT by OP: See comments and Is it possible to dynamically change font to a custom typeface with javascript?

edited Oct 5, 2024 at 0:42

Ethan G

1,4772 gold badges16 silver badges33 bronze badges

answered Sep 28, 2024 at 3:12

zdd

8,8759 gold badges50 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ethan G Over a year ago

Can you explain "use JavaScript to operate styles and set the font path at run-time"? I've used clamping behavior on a component by doing this inside my own .line-clamp class in a global style scss sheet: -webkit-line-clamp: var(--lines); and then in my html: [class]="maxLines > 0 ? ' line-clamp' : ''" and [style]="'--lines: ' + maxLines" That works to dynamically adjust the clamping behavior. I assume it re-evaluates the --lines var in the scss every time it re-renders, but tbh I'm not 100% sure how it works. Is something like that possible here?

zdd Over a year ago

@EthanG stackoverflow.com/questions/62349536/…

Ethan G Over a year ago

Ah ok - that helps me (basically moving it out of CSS into a typescript service I can call on init of my app component to add the fonts). If you can add that to your answer, that'd be great. I'll accept your answer.

Collectives™ on Stack Overflow

How to use an injected string as part of the path in a URL within CSS (in Angular)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related