1

I'm having trouble adding an image url to a variable in my LESS file.

I am using a project called Guide4You where I would like to add a new LESS file with my own images. This project uses node with webpack.

For my project I use this folder structure:

├── root
│   ├── load_image.png
│   ├── styles
│   │   └── substyles
│   │       ├── load.less

In the less file I have the following code:

@test: url("../../load_image.png");

Whenever I try to compile the code into webpack I get the following error:

[ './root/load_image.png
Module parse failed: 
C:\projects\root\\load_image.png 
Unexpected character \'�\' (1:0)\nYou may need an appropriate loader to handle this file type.

Is it possible that the less-loader sees my url as a reference to another loader and tries to execute it?

Jasper Callens
  • 55
  • 9

1 Answers1

1

You need an appropriate loader that would match that png of yours. To solve this problem, use either url-loader or file-loader so that it matches your png.

Documentation: https://github.com/webpack-contrib/url-loader, https://github.com/webpack-contrib/file-loader

Ahmed Mahmud
  • 281
  • 1
  • 12
  • Thank you for your response. How exactly can I call this url or file-loader from my LESS file? – Jasper Callens Jul 24 '17 at 08:09
  • Thank you for the documentation. I have tried a couple of things but none of them seem to work. 1) `@test: url("~file-loader?name=images/[name].[ext]!/../../load_image.png"); --> Error: [ './~/css-loader!./~/less-loader!./less/arrowbuttons.less Module not found: Error: Cannot resolve \'file\' or \'directory\' ./load_image.png in C:\\prj\\Running\\WebGisicon\\Tauris.WebGis\\Scripts\\Guide4You\\less\nresolve file\ C:\\prj\\Running\\WebGisicon\\Tauris.WebGis\\Scripts\\Guide4You\\less\\load_image.png doesn\'t exist` – Jasper Callens Jul 24 '17 at 09:21
  • 2) @test: url("~file-loader?name=images/[name].[ext]!../../load_image.png"); --> Error `CssSyntaxError: :1623:3: Unknown word at Input.error (C:\prj\Running\WebGisicon\Tauris.WebGis\Scripts\Guide4You\node_modules\postcss\lib\input.js:113:22)` This is because the @test variable will contain the function itself and not the result of the function. Example: @test: function (content) { ...} – Jasper Callens Jul 24 '17 at 09:25
  • 3) I replaced the image to the styles folder and used the following code: `@test: url("~file-loader?name=images/[name].[ext]!../load_image.png");` Strange enough this seems to work. Sadly I cant move the image permanently to this folder so I cant use this code. – Jasper Callens Jul 24 '17 at 09:28