Issue with @import in mobile.scss Overridden by Core Declarations
@nolo reported that when using @import in mobile.scss, the imported declarations were being overwritten by core declarations. However, when declaring rules directly in mobile/mobile.scss, they were applied correctly.
@pmusaraj suggested that the issue might be related to selector specificity, but @nolo tested switching the declarations between mobile.scss and @import in mobile.scss and found that the issue was not related to specificity.
@nolo was unable to reproduce the issue after creating a blank component with only a mobile.scss file. The cause of the original issue remains unknown, but it may occur under specific conditions, as noted by @pmusaraj.
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;}
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.
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..
No worries! Maybe this happens under a specific set of conditions…