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!

Answer 1

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.