Using LESS variables in extended LESS file Magento 2

Question

I need to use LESS Variables in my extended LESS file in my theme.

I've this code in my _extend.less in this location My_Magento\app\design\frontend\<My_Vendor>\<My_Theme>\web\i18n\fa_IR\css\source\_extend.less :

@import '_rtl.less';

and in the _rtl.less file:

.myClass{
    background: @color_theme;
}

Note that the @color_theme defined in the Parent Theme in this location My_Magento\app\design\frontend\<Parent_Vendor>\<Parent_Theme>\web\css\_general.less

So when I run:

php bin/magento setup:static-content:deploy

It will throw some errors like this:

variable @color_theme is undefined in file C:/xampp7/htdocs/My_Magento/var/view_preprocessed/css/frontend/<My_Vendor>/<My_Theme>/fa_IR/css/source/_rtl.less in _rtl.less on line 20, column 15

It will happens for any variable of any LESS Styles included in Parent Theme or Modules etc. in my _extend.less theme file!

How can I use LESS Variables from other sources (Parent Theme or Modules LESS files) in my _extend.less file?

I'm using Magento 2.1.9 with PHP 7.0.22 and XAMPP 3.2.2.

Thanks.

Answer 1

Oh, That was for my parent theme! It has separated style in yttheme.less file that loaded after style-l.less, so when style-l.less is compiling with _extend.less files, it has not access to yttheme.less variables!

So I added a new style in my theme like rtl.less in layout.xml and @import yttheme.less there! Now I have access to that variables and Grunt run perfectly.

But a new problem arrived! I cant change layout.xml for my locale(fa_IR)!? and the changes affected for all locale!