running static-content:deploy on multi store-view, fails with following error variable @media-common is undefined on theme where the language en_US
Magento – static-content deploy error
deployerrormagento-2.0magento2static-content
Related Solutions
Magento 2 layout mechanism may load and process all the active layouts having the same name. So, in your case, if you want to add more content to product view, you can create the layouts having the same name with the product core layouts. For example, we create a module with the following folder structure:
In catalog_product_view.xml:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.type">
<block class="Magento\Cms\Block\Block" name="hello-world">
<arguments>
<argument name="block_id" xsi:type="string">hello-world</argument>
</arguments>
</block>
<block class="Magento\Framework\View\Element\Template"
name="boolfly.block.bundle"
template="Boolfly_ProductsBlock::hello.phtml"/>
<block class="Boolfly\ProductsBlock\Block\HelloWorld"
name="hello.world" after="-" />
</referenceContainer>
</body>
</page>
We added three blocks. The first block will call a static block with id hello-world. The second block is the core block Magento which will render our hello templates. The last one is our custom block to show hello world:
<?php
namespace Boolfly\ProductsBlock\Block;
class HelloWorld extends \Magento\Framework\View\Element\AbstractBlock
{
protected function _toHtml()
{
return '<div>hello world</div>';
}
}
The same logic for bundle and configurable layout. The most important thing is that we need to reference to a container node of catalog product layout.
There is another way that we will override the layout in our theme. For example, create catalog_product_view.xml under: <Vendor Theme>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml. And then, follow the same logic above to add our block content.
@Hemant I don't see the @minicart-icon-color variable in my 2.1.2 codebase, so I'm assuming that's a variable that you created? If so, first you'd want to make sure it's, in fact, declared and assigned a value Less docs on variables.
Next, I'd suggest that you look at your custom theme's less files to see where you're trying to use that variable. It's very likely that you don't have access to @minicart-icon-color within the scope of where you're using it you can get away with using a reference import option to include your variable's definition within the scope of the less file(s) in question.
For example if I create a custom theme app/design/<Vendor>/<theme> and I create two less files...
app/design/<Vendor>/<theme>/web/css/source/a.lessapp/design/<Vendor>/<theme>/web/css/source/b.less
and I define a variable in a.less, such as @minicart-icon-color, if I wanted to use that value in b.less I would need to import (@import) the less file where @minicart-icon-color is defined, in this case a.less.
So in b.less I would have @import "a"; @import reference in Dev Docs. I could also use @import (reference) "a"; if I don't want to copy over the variable definition again in b.less from a.less (again, you can refer to the less docs link on that from above).
You'll probably want to look for a similar situation in your code (I can't provide more suggestions without details). If that's covered and you're still getting the same issue...then it's probably due to the order in which your less files are being loaded. You control the order by using an _extend.less file (look through that link for examples on how to do so).
I hope this helps.
Best Answer
@deroccha, I have laid out an answer to this question over here https://magento.stackexchange.com/a/152944/1956.
The long and short of it, is that
@media-commonisn't within the scope of your theme, in one or more .less files. We're supposed to be able to control this via use of _extend.less (which would load our custom files aftervar/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less, but for some reason that doesn't always seem to work. That being the case, you can follow the instructions in the above link as a temporary solution.UPDATE The use of
_extend.lessdoes work as long as there isn't another configuration somewhere, like adding an implicit css call on a page configuration xml file. An example implicit css call:<head> <css src="css/custom/theme.css" /> </head>If there is this type of entry, then there shouldn't also be an@importin the theme's_extend.less...either or should be used.