2

I am using a theme that I have created based on a third party theme 'Optimus' and I am trying to use Grunt to compile the LESS.

However, when I run grunt less:theme it fails with the following error:

>> NameError: variable @media-common is undefined in pub/static/frontend/vendor/theme/en_GB/css/source/_optimus-lib.less on line 6, column 9:
>> 5 
>> 6 & when (@media-common = true) {
>> 7
Warning: Error compiling pub/static/frontend/vendor/theme/en_GB/css/_optimus.less Use --force to continue.

Aborted due to warnings.

Grunt works perfectly on the ultimate parent theme (magento/blank) but it also fails with the same error on the Optimus theme.

Clearly it isn't finding @media-common but searching around this seems to be a Magento variable that defines the type of device (mobile or desktop).

UPDATE:

I think I have resolved this but I would appreciate any feedback to confirm that this is the right thing to do.

I read this post on StackExchange which suggested adding this code:

@import (reference) "../source/lib/variables/_responsive.less";
@import (reference) "../source/lib/_responsive.less";

(I think my file structure is the same as in the post)

Having done this grunt less:theme seems to work but I want to be sure this is correct.

Improve this question

2 Answers 2

Reset to default
1

That's correct. The @media-common less variable is found in the /lib/web/css/source/lib/_responsive.less file. Does your Optimus theme not inherit from any base Magento theme? If not, that would be the reason why. Magento's less implementation is extensive and uses a custom media query system of which that @media-common variable is important.

Improve this answer
1
  • Yes, the theme inherits from Magento/blank which is why I think it's odd that I had to do this. Thanks for the feedback.
    – Phillip Meyer
    Commented Apr 27, 2017 at 6:54
1

If you are creating .less files in a custom theme, the only file that auto-magically will pull in the whole UI Library is the extend.less file. That file gets pulled in by Grunt (or the built in less complier) when ever a compile command is run. If you have that file in your theme, you don't have to do any imports. If you want that file in your theme, it just needs a path like this:

app/design/frontend/{{vendor_namespace}}/{{theme_name}}/web/css/source/_extend.less

Improve this answer
3
  • I do have _extend.less in my theme but to double check: I need to add css/source/_extend.less to my themes.js file as well as the source less files for the parent theme? In fact, do I also need to add the source less files for the Magento/blank theme which is the parent of my parent theme (hope that makes sense)?
    – Phillip Meyer
    Commented Apr 27, 2017 at 7:30
  • 1
    I'm not a pro at all the things that you can do with themes.js, but for the system to work, all you have to do is add in your theme info in the exact same format as the luma info is in (it will create the styles-m and styles-l files from what is in your theme). There is no need to pull in the other files from the blank theme though, there are import directives in base that will pull in all _extend.less files and compile them down into the file defined in the themes.js file. I hope that clears that up!
    – circlesix
    Commented Apr 27, 2017 at 15:47
  • some more info here: magento.stackexchange.com/questions/163836/override-less-file/… and here: devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/…
    – circlesix
    Commented Apr 27, 2017 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.