Relative URLs in imported less files vs resolve-url-loader

[karlvr]

resolve-url-loader attempts to re-resolve urls in the output of less-loader according to the original .less file the url was in, even though less has already done that job. At least that's what I believe.

I think this must be a problem for other users of the life-saving craco-less?

Versions

react-scripts: 3.4.1
less-loader: 5.0.0
@craco/craco: 5.6.4
craco-less: 1.16.0

Example

This is what our files looks like (a little bit):

css/main.less:

@import "components/button";

css/components/button.less

.button {
    background-image: url("../img/button.svg");
}

And then there's img/button.svg containing an SVG.

Then when build with npx craco build we get this error:

ModuleNotFoundError: Module not found: Error: Can't resolve './img/button.svg' in '/blah/blah/css'

Resolution

I have been able to fix this by disabling the resolve-url-loader using this in my craco.config.js:

	plugins: [{
		plugin: CracoLessPlugin,
		options: {
			lessLoaderOptions: {
				strictMath: true,
				noIeCompat: true,
				relativeUrls: false,
			},
			resolveUrlLoaderOptions: {
				// eslint-disable-next-line @typescript-eslint/no-unused-vars
				join: (filename, options) => (uri, base) => {
					return path.normalize(path.resolve(path.dirname(filename), uri))
				},
			},
		},
	}],

Maybe this will work for other people!

Is this a broader issue with craco-less that should be incorporated into craco-less?

[ndbroadbent]

Hello, sorry I'm not sure. I will see if other people find this issue and reply with some more thoughts. I think it should be fine to make this configurable

[fgfg163]

I didn't find resolveUrlLoaderOptions in document, and it not work on my project.
I use modifyLessRule to remove "resolve-url-loader".

  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule: (lessRule, context) => {
            lessRule.use = lessRule.use.filter(i => !i.loader.includes('resolve-url-loader'));
            return lessRule;
        }
      }
    }
  ]

"resolve-url-loader" document said it work with sass.

[tomorrowcheng]

I have the same problem, and resolveUrlLoaderOptions not work on my project too.