@imported stylesheets in mobile.scss don't take precendence over core declarations

I’m reviewing some themes and see that for mobile styles, declarations are now overwritten by core declarations.

When I declare a rule directly in mobile/mobile.scss, it has precedence and is applied. But when I use @import in mobile.scss, the imported declarations are overwritten.

E.g. some @imported declarations I have in themes that are now overwritten by declarations in core:

#list-area { background: xxx;}
body { background-color: xxx;}
2 Likes

Hmm, that’s surprising. The theme stylesheets, whether mobile or desktop, are set to be loaded after core ones, see:

Are you sure there isn’t something else happening, like a selector specificity issue? Often core gets updates with more specific selectors which can mean themes using the original selector would regress.

2 Likes

It wasn’t about specificity as I switched exactly same declarations between mobile.scss and using @import in mobile.scss. First was applied and the other was overwritten in the browser inspector.

But now I also can’t reproduce it! Just created a blank component with only a mobile.scss to try it again and declarations are applied both ways.

So sorry for the false report! Though I’m at loss what caused it before… had it in different browsers as well…

2 Likes

No worries! Maybe this happens under a specific set of conditions…

2 Likes