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? Commented Jun 27, 2022 at 11:32
  • Try looking for where it is used with grep. Commented Jun 27, 2022 at 11:32
  • 1
    I added all entries to my question. Commented Jun 27, 2022 at 11:37
  • I did not downvote? Commented 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 Commented Jun 27, 2022 at 11:56

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.