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

Question

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 \Magento\Framework\Component\ComponentRegistrar;

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?

Answer 1

First possible solution

Did you try

bin/magento dev:source-theme:deploy

in your case

bin/magento dev:source-theme:deploy --type="less" --locale="de_DE" --area="frontend" --theme="company/fresh_green"

before

grunt less:company_fresh_green

---

Second possible solution

Source

@import directive

You can import local and remote .less and .css files in your .less stylesheets by using the standard LESS @import directive. According to the @import syntax, specifying the file extension for the imported file is not mandatory. For example, the following notation is allowed:

@import 'source/lib/_lib';
@import (css) 'styles';

But in process of resolving the file path, the application adds the .less extension for the imported files in all @import entrees. So in the processed files, the statements from the previous example will look like following:

@import 'source/lib/_lib.less';
@import (css) 'styles.less';

As a result, the processed files are different from the source files. So in the client-side compilation mode or when using grunt commands, the application cannot use symlinks to the source files. Instead it uses the copies of processed files, and they are published to the pub/static directory. In case of importing CSS resources, this also results in not finding and not importing the required files.