Using multiple styleUrls does not work

[tjvantoll]

If I pass multiple .css files into a @Component decorator’s styleUrls property, only rules in the last .css file are applied. For instance in the code below only the rules in two.css are applied:

@Component({
  selector: "foo",
  template: "...",
  styleUrls: ["path/to/one.css", "path/to/two.css"]
})

This is a reasonably big limitation because using @import in .css files imported by Angular also doesn’t appear to work (which might be another issue?).

Thanks.

[hdeshev]

It seems to work fine on my end.

The renderer doesn't contain any code that resolves CSS files -- the magic is done by Angular. Could you check if the path to the CSS file that doesn't get loaded is correct?

[tjvantoll]

Ok this is super weird. This seems to work when the CSS files target the same component, but as soon as they target different components the styles no longer seem to be applied. I uploaded an example https://github.com/tjvantoll/angular-css-issue

[hdeshev]

It turned out there were two bugs lurking in that codebase. I fixed those, and your app runs fine on my end. Please upgrade to nativescript-angular@0.0.37.

[tjvantoll]

Thanks for the fast turnaround @hdeshev.

I tried this out and it appears to work, although I’ve hit a possibly related bug now—rules that I apply in stylesheets in the stylesUrls of pages that aren’t the first page in my app aren’t applied.

It’s probably easiest to just see this in Groceries. These styles are applied exactly as I’d expect, and these aren’t. I can try to limit this down tomorrow, but it’s getting near the end of the day here and just wanted to make sure you were aware.

[tjvantoll]

I’ll reopen this issue for now. If you’d prefer for this to be in a separate issue let me know.

[hdeshev]

Well fixing that one was a bit harder than I expected since it required a fix to tns-core-modules, but we're finally there. I just pushed an upgrade to tns-core-modules@2.0.0-angular-0 and nativescript-angular@0.0.38 to the Groceries app that fixes the problem.

[tjvantoll]

I used every available positive emoji to express my gratitude. The fix works great 😀

[yemiOdetola]

I'm kinda lost halfway tho

[genkan-drew]

I'm having the same issue with the app not applying both stylesheets,
How do I apply the fix that was updated?