0

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?

5
  • 1
    Take a look at magento.stackexchange.com/questions/110164/… Jun 24, 2022 at 15:18
  • It is not answering my question, it shows how to override a LESS file. I just try to use the parent less files and variables.
    – Black
    Jun 27, 2022 at 7:42
  • @Black Colors like red, green, yellow, etc do not work in less files. Use #00ff00; Jun 30, 2022 at 10:48
  • @DanielIfrim, thats not true, they work of course. You can use everything that also works in CSS.
    – Black
    Jul 4, 2022 at 10:19
  • @Black I think the answer to your question you can find in official documentation. See Extend parent styles. Jul 20, 2022 at 14:51

1 Answer 1

0

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.

2
  • You answered on a old version of my question. This is not the problem.
    – Black
    Jun 27, 2022 at 15:03
  • if the updated answer didn't help, it would be nice to take a look at dev/tools/grunt/configs/themes.js
    – Victor S.
    Jun 27, 2022 at 20:39

Your Answer

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

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