@media-common variable is initially set in either:
This is if you're using either the blank or luma theme as a parent. If so, then this applies to you. If not, then whatever your parent theme is, should have a declaration and initialization of this variable...or if the parent theme you're using calls another for it's parent, the same applies.
Take a look at the
styles-l.less files to see the order in which less files are imported. You can also add some form of logging at
The way that I've gotten around this is to use a Less reference import Less Docs: reference import option, which will not pull in the code within said Less file, it will just make the files available within the scope of the file requesting the import.
An example of what I've imported at the top of a custom Less file:
@import (reference) "../source/lib/variables/_responsive.less";
@import (reference) "../source/lib/_responsive.less";
*Note the path I'm using here in relative to my custom theme's custom Less file path in relation to the eventual
My custom theme directory hierarchy looks like this:
The files that I want to import are here:
My custom file, which will be doing the import, will eventually live here:
Now, with all of that said here's the kicker, you don't really need to do this. Why? Well, aren't the css styles within the CSS Guards, in this case
@media-common = true only meant to be called with the
styles-m.less file? Yes, because M2 is supposed to be mobile first and therefore the
styles-m.less file is the only file (save some email Less files and I think a few others) that actually has
@media-common set to
true (and there are only handful of files that even set this variable, period).
So anything that is within a CSS Guard which has the condition of
@media-common = true is meant to be ran always, except for when the
styles-l.less file is called.
false as the
styles-m.less file should have already loaded up these 'common' styles...and if you look in
vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml you'll see that
styles-m.css (which gets generated from
styles-m.less if it isn't already generated Dev Docs: .css request to .less search - More Here) gets loaded before
This means that you could literally get around that error by defining
@media-common: true; at the top of your custom Less file and based on what I've described above and what I'm understanding of the code so far, that should take care of the error.
Here's the problem: Whether you're including the
source/lib/variables/_responsive.less files or defining your own
@media-common: true; at the top of your custom file, this will overwrite the
@media-common: false; assignment in
styles-l.less, so you're going to get code duplication in both
styles-l.less. I don't see any way around that at the moment. The root issue of this is that our custom Less files aren't being loaded after both
styles-l.less or that the
@media-common variable's value isn't being brought into the scope of our custom Less files. This shouldn't be the case, if we're importing our custom less via the
_extend.less file, which the docs (suggest), as you have the following at the end of both
I hope this has given you both insight and an immediate solution to your problem.
If you or anyone else comes up with a better solution, I'm all ears.
UPDATE So disregard what I mentioned above regarding code duplication. In my case I was both adding an explicit inclusion of my custom css in a page and I also added my custom less file to my theme's
I was modifying
app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml to include the following:
<!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE -->
<css src="css/pages/homepage.css" />
and I also had an entry in
What I've found is that it's either or, not both. So in this case when M2 was trying to process a request for
http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css it would load up the appropriate
homepage.less file and this file wouldn't have
@media-common within it's scope, so the error was telling. In order to get around that, add import references as I've mentioned above and they won't be any code duplication. Furthermore, but removing the entry from
styles-l.less won't look for the
homepage.less file and there's no code duplication.
- My example here is for homepage-specific styles...but this illustrates a situation where I wasn't using the system correctly and that's why I was getting that error. I hope this helps