When in production mode, concatenated files tend to leave @import statements at the middle of the compiled CSS, however those statements need to come first (see https://developer.mozilla.org/en-US/docs/Web/CSS/@import).
Extensions that rely on the bootstrap / SCSS preprocessor tend to include such statements for including web fonts.
See : https://github.com/ProfessionalWiki/chameleon/issues/205
Thanks !
@BertrandGorge This is currently an intended compromise. We support use of @import only in user-generated stylesheets. There, we make sure that the bundler injects each stylesheet that has an @import statement at the top in its own <style> element so that they work correctly since they are only valid at the top of a stylesheet.
For software-defined stylesheets, we don't support this because it would force a difficult choice between intuitive functional behaviour and performance best-practice. If we were to hoist the @import statements, it would chance the cascading order and thus change how the styles behave. If we keep them as-is and serve each stylesheet in a separate request, it degrades performance.
In general, we have not yet encountered a use case where use of @import made sense for software-defined feaetures. After all, if you already know you need to import certain styles, why wait until the browser is blocked and waiting to render to request the remaining styles, when you could have bundled them as part of the module in the first place.
Note that all this is about CSS native @import statements. The @import statement from Less will compile away and is fine to use anywhere at any time.
If you happen to run into this by mistake, you may have to rename the target file from .css to .less so that Less will compile it. For compatiblity reasons, Less does not CSS imports by default.
I believe the above offers two ways to make this work, and explains why we can't easily support this by default. If this is not trivial or breaks something, please let us know, as this is not meant to be limiting or complicated in any way.
Hello @Krinkle - no problem, as there's a work around anyway, using the MediaWiki:Common.css page.
Please note that the issue came not from a CSS file but from a LESS file - using the chameleon skin + a user generated skin (see https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md). Since my skin customization is compiled by chameleon at run time (on date change of the LocalSettings.php), I have no real control on the way to resource loader will handle my css. I believe that the import statement is simply stuck between chameleon's own resources and mine.