1

I have an image that i need to use in .less file, the image is located in:

pub/media/kool/setting/blank.gif

in the .less files i tried to define it like this:

@footer_bg_file:~"../kool/setting/blank.gif"

but i always got an error like this in var/log/system.log

[2020-05-04 09:05:03] main.CRITICAL: Unable to resolve the source file for 'frontend/vendor/theme/en_US/kool/setting/blank.gif' [] []
2

You can use the .lib-url('images/fallback.png'); function, this example is taken from the core in lib/web/css/source/lib/_utilities.less.

.column.left {
    .lib-url('images/fallback.png');
    background:url("@{url}") repeat-y;
}
.columns {
    .lib-url('images/fallback.png', 'Magento_Catalog');
    background:url("@{url}") repeat;
}

This is the function, it returns the path you specified with the base URL prepended and optionally accepts a second argument which is a module.

// File - lib/web/css/source/lib/_utilities.less
.lib-url(@_path) {
    @url: "@{baseDir}@{_path}";
}

.lib-url(
    @_path,
    @_module
) when not (@_module = false) and not (@_module = '') and (@urls-resolved = false) {
    @url: "@{_module}::@{_path}";
}

.lib-url(
    @_path,
    @_module
) when not (@_module = false) and not (@_module = '') and (@urls-resolved = true) {
    @url: "@{baseDir}@{_module}/@{_path}";
}

This function uses the @baseDir variable and optionally accepts a second argument which is a module: which is declared in lib/web/css/source/lib/_variables.less

@baseDir: "../";

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.