Closed zxcabs closed 6 years ago
@zxcabs are you using your png
file in a mixin or something (not actual less
file you require, but some other file somehow imported less
-way)?
@nkbt No, it's simple less file
.root {
width: 29px;
height: 29px;
background: url('./icon.png');
cursor: pointer;
}
That is hard to tell, could be even some typo... If you could make a simple repo to reproduce the issue
I'm actually having the same issue trying to convert my current project to CSS Modules.
That is interesting. When I migrated our sprockets build with sass and all that kind of stuff - I had almost no issues. The only issue I had was - not correctly resolved path inside imported files and different mixins. But in general everything worked like a charm.
loaderUtils.urlToRequest(url, root)
returns url("+require("./cat.png")+")
require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")
gives url("+require("cat.png")+")
can anybody fix it? :smiley_cat:
@zxcabs I kind of debugged all the chain and it is quite clear where exactly the issue, but that code was written on purpose...
When I changed:
if(!moduleMode) urlRequest = loaderUtils.urlToRequest(url, root);
return "\"+require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")+\"";
to
urlRequest = loaderUtils.urlToRequest(url, root);
return "\"+require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")+\"";
Everything works fine.
@zxcabs @markdalgleish lol, you know what worked?
No changes to loader at all.
oh :smile:
Any update on this?
@moroshko we're still waiting to hear back on this issue in Less: https://github.com/less/less.js/pull/2615
Not sure if this still an issue?, but this could be cause your package json has less in devdeps have you tried less-loader instead of less?
It's stiil an issue. I have to load images via url("../folder/img.jpg") instead of just url("img.jpg") which is very inconvinient.
make sure you install less
: npm install less -D
less-loader
won't auto install less
It's installed. Still doesn't work.
background: url("./img/login-background.png") no-repeat 0 0;
Module not found: Error: Cannot resolve module 'img/login-background.png' in c:\Users\spybo\Documents\Projects\project\src\frontend\components\login\EntrancePage
Getting the same error as mmakarin. Update: npm install css-less-loader --save-dev did the trick for me.
My workaround was that I've created additional temporary loader called (just local .js
file called _less-loader-fix.js
):
module.exports = function (content) {
return content.
replace(/url\(('|")*(\.\/)*(.+?)('|")*\)/g, 'url(./$3)').
replace(/\.\/((https?|ftp):\/\/)/, '$1');
};
And using it in webpack.config.js
like this:
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
path.resolve('./_less-loader-fix'),
'less'
]
Present RegEx
might not cover all use-cases, so you might want to extend it a bit on demand.
have the same problem as mmakarin..
background: url(../../style/images/icon.png) no-repeat;
works fine
but background: url(./images/icon.png) no-repeat;
warn module not found
have the same the problem too.
+1 on this problem
+1 meet this problem too.
using ../dir_name to return the same root works for me.
still working background: url("\./images/cat.png");
but there must be a normal solution
background: url("\./images/cat.png");
does not work for me. As a temporary solution I added 'image' folder to webpack resolve fallback path. I still cannot load image or font from the stylus file's folder.
For me this background: url("\./images/cat.png");
does not work for stylus.
same issue here
I found that the only way is url(cat.png) and add that images folder to webpack fallback path.
I know one more fix for less: ~"url()"
.
Just hit this too. Discovered the ../directory_i_was_already_in/file.svg
trick works for me too.
Please try again with less-loader >= v4.0.0
, if there are still regressions I will reopen 😛
Still does not work... :worried:
background: url("img/logo.png"); //not work
background: url("\./img/logo.png"); //work
@NicoBurno StackTrace (Error) please
@michael-ciniawsky there are two error sections:
Any update to this? Having near-exactly the same error as @NicoBurno - Using:
@neutraali it have some issue becouse of postcss-loader. i'm still trying to understand it
Had the same with webpack 2 and css-modules on
background: url("\./img/logo.png"); //work
helped
@neutraali update did not help: webpack@2.3.3 css-loader@0.27.3 postcss-loader@1.3.3 less-loader@4.0.3
@Bnaya I localized the problem. But I do not understand why this code works like this ... https://github.com/webpack/loader-utils/compare/master...NicoBurno:patch-1
So why does background: url("\./img/logo.png");
work @aspirisen ? I'd love to know the root cause.
@michael-ciniawsky This is still an issue with less-loader 4.0.3. Please re-open :cry:
hmm this seems to be an issue when just using postcss-loader as well.
adding resolve-url-loader fixes this for me
...!resolve-url!less...
@mnpenner @bradennapier can your provide minimum reproducible test repo?
Erm... I can't reproduce this is a new project. Here's what I tried [dead]. Will post again if I figure out to cause, unless maybe it was fixed recently.
For me, bug not related to css-loader
. Seems more related to less/sass/etc/-loader
.
This is what worked for me. Add to webpack config the following lines
resolve: {
modules: ['./', 'node_modules'],
}
@smashercosmo I can not understand why it works。。It is surprise
Just traced my postcss-loader
issue all the way here! Wow. Please fix. :)
Still a bug with scss files and sass-loader (v8.0.2): css-loader (v6.9.1)
Error: Cannot find module '/img/ajax-loader.gif'
"resolve" / "modules" setting is not helped
Hello, when i use
"background: url(./icon.png)"
in my less file i got errorModule not found: Error: Cannot resolve module 'icon.png'
.Here part of
webpack.config.js
fileIf remove module options or less-loader all works well.