Skip to content

Magento 2 – How to extend a custom theme which uses less variables?

I have a custom theme for our onlineshop named “Company Fresh” which extends Magento/luma.

I created another theme which I named “Company Fresh Green“.

It is based on “Company Fresh” but has only one difference. The background color of all sites should be green.

I added these files to my new theme:


(THEME_DIR = app/design/frontend/company/fresh_green)

THEME_DIR/registration.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

use MagentoFrameworkComponentComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/company/fresh_green', __DIR__);

THEME_DIR/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Company Fresh Green</title>
    <parent>company/fresh</parent>
</theme>

THEME_DIR/web/css/source/_extend.less

@import 'sites/category/_produkte';

THEME_DIR/web/css/source/sites/category/_produkte.less

body {
    background: green !important;
}

But if I compile, I get

Running "less:company_fresh_green" (less) task
>> NameError: variable @md is undefined in pub/static/frontend/company/fresh-green/de_DE/Magento_PageBuilder/css/source/slick/_slick.less on line 383, column 36:
>> 382     // MobileSlider
>> 383     @media screen and (max-width: (@md - 1) ){
>> 384         .pagebuilder-slider{
Warning: Error compiling pub/static/frontend/company/fresh-green/de_DE/css/styles-m.less Use --force to continue.

@md is defined in “Company Fresh”, but my new theme does not know it. Why?