Using LESS variables in extended LESS file Magento 2
-
13-12-2020 - |
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.
Solution
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!