2

In folder app\design\frontend\Vendor\theme\web\css\_styles.less
It already @import 'source/lib/_lib.less' this will define variables/_colors.less
But i can't figure out why magento raise undefine variables in module Magento_Theme inside of my custom theme
Is it process compile less in module first then go to web folder of theme? enter image description here Testing with Magento 2.0.2 and xampp on windows 10

1

On your custom theme copy this file:

app/design/frontend/Magento/luma/web/css/source/_variables.less

to

app/design/frontend/[PACKAGE]/[THEME]/web/css/source/_variables.less

This file above contains the variable @copyright__background-color that you need.

Or you can add this variable on the top of your _styles.less but I don't recommend it.

So run these commands:

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:clean &&
mage cache:flush &&
mage indexer:reindex &&
mage setup:static-content:deploy ; mage setup:static-content:deploy -f;
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/
0

you have to create app\design\frontend\Vendor\theme\web\css\_theme.less and also test this by putting some css in it.

.page-header {
    background-color: #000;
}

after this deploy the static content

php bin/magento setup:static-content:deploy
0

Understanding the use of LESS in Magento 2 is an important skill. First of all, check out that if you are using the correct syntax or not. When a LESS file runs, it automatically generates CSS. Here is the basic example to understand how a LESS converts into CSS.

Let’s take a LESS file with the following code:

@radius: 20px;

#somediv {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

The above code will be compiled in CSS as:

#somediv {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

In this example, the LESS file with a variable @radius will assign a value of 20px wherever @radius variable will be invoke in LESS file and generate the CSS file.

Now, if we talk about how to use custom LESS in a Magento 2 store, you will have to start with creating a basic module with custom.less file in app/code/Module_Namespace/Module_Name/view/frontend/web/ and after adding the custom code in it, enable the extension and perform necessary actions using below Magento 2 CLI commands:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush
php bin/magento indexer:reindex

For the reference, please have a look at this blog post: https://www.cloudways.com/blog/use-less-in-magento-2/

0

Make sure your own Less files don't have the same name as the Less files from the Luma theme! If so, they will overwrite the Luma files.

So, if you are using a file named variables.less, and it only contains three variables, it will, after deploying, overwrite the luma theme variables.less and all the Luma variables will be gone.

0

I have added @copyright__background-color: @color-gray-middle4; to my _theme.less file according following link, its worked for me.

https://github.com/magento/magento2/issues/12398

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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