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.

2 Answers 2


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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