2

I created a new minimalistic theme in a fresh Magento 2.4.2

The theme inherits from Magento/luma

Example:

app/design/frontend/company/foo/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/foo', __DIR__);

app/design/frontend/company/foo/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Foo</title>
    <parent>Magento/luma</parent>
</theme>

dev/tools/grunt/configs/local-themes.js:

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

 'use strict';

 /**
  * Define Themes
  *
  * area: area, one of (frontend|adminhtml|doc),
  * name: theme name in format Vendor/theme-name,
  * locale: locale,
  * files: [
  * 'css/styles-m',
  * 'css/styles-l'
  * ],
  * dsl: dynamic stylesheet language (less|sass)
  *
  */
 module.exports = {
     company_foo: {
         area: 'frontend',
         name: 'company/foo',
         locale: 'de_DE',
         files: [
             'css/styles-m',
             'css/styles-l'
         ],
         dsl: 'less'
     }
 };

Next I executed php bin/magento setup:upgrade. If I compile with grunt refresh then it builds successfully.

Problem:

If I add these two files ...

app/design/frontend/company/foo/web/css/source/_extend.less:

@import '_test.less';

app/design/frontend/company/foo/web/css/source/_test.less

body { background: black; }

... and compile with grunt refresh, then I get:

Running "less:company_foo" (less) task
>> NameError: variable @sidebar__background-color is undefined in pub/static/frontend/company/foo/de_DE/css/source/_tables.less on line 21, column 34:
>> 20         tfoot {
>> 21             .lib-css(background, @sidebar__background-color);
>> 22             > tr {
Warning: Error compiling pub/static/frontend/company/foo/de_DE/css/styles-m.less Use --force to continue.

Aborted due to warnings.

All occurences of sidebar__background-color in the codebase:

var/view_preprocessed/pub/static/frontend/company/foo/de_DE/Magento_Checkout/css/source/module/_cart.less:        .lib-css(background, @sidebar__background-color);
var/view_preprocessed/pub/static/frontend/company/foo/de_DE/Magento_Theme/css/source/module/_collapsible_navigation.less:@collapsible-nav-background: @sidebar__background-color;
var/view_preprocessed/pub/static/frontend/company/foo/de_DE/css/source/_extends.less:            .lib-css(background, @sidebar__background-color);
var/view_preprocessed/pub/static/frontend/company/foo/de_DE/css/source/_tables.less:            .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-luma/Magento_Checkout/web/css/source/module/_cart.less:        .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-luma/web/css/source/_variables.less:@sidebar__background-color: @color-white-smoke; // Used in cart sidebar, Checkout sidebar, Tier Prices, My account navigation, Rating block background
vendor/magento/theme-frontend-luma/web/css/source/_extends.less:            .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-luma/web/css/source/_tables.less:            .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-blank/Magento_Checkout/web/css/source/module/_cart.less:        .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/_module.less:        .lib-css(background, @sidebar__background-color);
vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source/module/_collapsible_navigation.less:@collapsible-nav-background: @sidebar__background-color;
vendor/magento/theme-frontend-blank/web/css/source/_variables.less:@sidebar__background-color: @color-white-smoke; // Used in cart sidebar, Checkout sidebar, Tier Prices, My account navigation, Rating block background
vendor/magento/theme-frontend-blank/Magento_Customer/web/css/source/_module.less:@account-nav-background: @sidebar__background-color;

1 Answer 1

2

Notice this error:

NameError: variable @sidebar__background-color is undefined in pub/static/frontend/company/foo/de_DE/css/source/_tables.less on line 21, column 34:

In no place in the code you've mentioned is sidebar__background-color defined. Try looking for where it is used:

$ grep -r 'sidebar__background-color' *

EDIT

With the new information, we see that sidebar__background-color is defined in vendor/magento/theme-frontend-blank/web/css/source/_variables.less.

So add this code to app/design/frontend/company/foo/web/css/source/_extend.less:

@import '_variables.less';
5
  • Exactly. Then why do I get the error?
    – Black
    Jun 27, 2022 at 11:32
  • Try looking for where it is used with grep.
    – dotancohen
    Jun 27, 2022 at 11:32
  • 1
    I added all entries to my question.
    – Black
    Jun 27, 2022 at 11:37
  • I did not downvote?
    – Black
    Jun 27, 2022 at 11:52
  • 1
    That actually worked! But I wonder why I need to do this, I thought I just need to define the parent and it does import all files from the parent theme
    – Black
    Jun 27, 2022 at 11:56

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.