dynamic styleUrls in angular 7

Question

After trying the other answers in SO, and none of them working, i'm thinking it a problem in the latest version of Angular...

This will work:

@Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styleUrls: ['./some-thing.component.scss', `./some-thing.component.extra.scss`]
})

Where as, this will not

const dynamic = 'extra';
@Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styleUrls: ['./some-thing.component.scss', `./some-thing.component.${dynamic}.scss`]
})

I assume it's down to some kind of runtime error? Does anyone have a solution for this? 'dynamic' will be populated from environment variables in the app.

thanks in advance!

@Lys i tried that already. It just prints the file name, no scss comes into the build. — Action_Turtle, Feb 11 '20 at 08:15
@Lys revisited that idea of using require, i was missing default. i have answered my own question. Thanks for the push back to that direction though — Action_Turtle, Feb 11 '20 at 08:41

score 2 · Accepted Answer · answered Feb 11 '20 at 08:39

2

I'll leave this here for others:

@Component({
    selector: 'app-some-thing',
    templateUrl: './some-thing.component.html',
    styleUrls: [
        require('./some-thing.component.scss').default,
        require(`./some-thing.component.${dynamic}.scss).default`
    ]

Notice, the '.default' added to the require. I had issues until I added default... lack of sleep i guess.

answered Feb 11 '20 at 08:39

Action_Turtle

150
11

I know that post is old, but could You please add some more explanation how You did it? When I copy it, it seems to not work... – ruddnisrus Sep 22 '22 at 19:48
@ruddnisrus - This was so long ago I no longer have the code as on a different contract. What have you tried? Make a new post with your code etc, might be able to help aways – Action_Turtle Sep 23 '22 at 07:37
I'm getting this error styleUrls must be an array of strings ... why? – Andre Jan 24 '23 at 18:17
@Andre you will need to post code for us to see. Also keep in mind this was 3 years ago, lots has changed in Angular since then, so may need a different solution. – Action_Turtle Feb 01 '23 at 09:37

dynamic styleUrls in angular 7

1 Answers1