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' [] []

1 Answer 1

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: "../";
1
  • Hi Ben, I face same issue also. How can I import app/design/frontend/Vendor/Theme/web/css/_sources.less file inside app/design/frontend/Vendor/Theme/Magento_Catalog/web/css/listing.less file? I want to import in listing.less file. Jul 20, 2021 at 6:25

Your Answer

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

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