Several other questions/answers here say to use the variable @{baseDir} to get the URL for background-image. I added this to my themes less file, however, when I compile, it crashes.
variable @baseDir is undefined
I do not understand how to proceed. I found several other files that have the reference to baseDir and it works fine, but in this specific less file, it doesn't. Frustrated.
I notice that the mixins and variables are defined in lib/web/css/source/lib and pub/static/frontend/{vendor-name}/{theme-name}/en_US/css/source/lib.
So I added the following import in
app/design/frontend/{vendor-name}/{theme-name}/web/css/source/_extend.less:
@import 'lib/_lib';
...
This import contains the definitions of variables and mixins of various less files inside lib.
In my case, I was trying to change the minicart icon to a svg put in web/images. I wanted to use the .lib-icon-image() mixin which has ${baseDir} in its first argument. I was getting $baseDir is undefined because it did not come across any $baseDir: 'path' declaration before. Then I hard-coded the @{baseDir} in the .lib-icon-image() mixin and I got .lib-icon-image is undefined. Then I realized that the neither the variable nor the mixin is defined in my custom theme and then I imported lib/_lib and it compiled without issues. This took me hours.
Hope this helps someone!
Please use the base URL like this
First add image in app\design\frontend\vendor\theme\web\images folder and write css as below:
background: url('@{baseDir}images/icon_sprite.png');
after add new image run command as below:
- php bin/magento cache:clean
- php bin/magento setup:static-content:deploy
if it's helpful please accept it, Thanks
