css-loader: Error can't find module when using less-loader and "module" options

Hello, when i use "background: url(./icon.png)" in my less file i got error Module not found: Error: Cannot resolve module 'icon.png'.

Here part of webpack.config.js file

module: {
            loaders: [
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style', 'css?module&localIdentName=[hash:base64:5]!postcss!less')
                },
                {
                    test: /\.(jpg|png)$/,
                    loader: 'url-loader?limit=100000'
                },
                {
                    test: /\.svg$/,
                    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
                }
            ]
},

If remove module options or less-loader all works well.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 3
Comments: 50 (6 by maintainers)

Most upvoted comments

This is what worked for me. Add to webpack config the following lines

resolve: {
  modules: ['./', 'node_modules'],
}

+18

smashercosmo on Aug 29, 2017

@zxcabs @markdalgleish lol, you know what worked?

20150610-231147

No changes to loader at all.

nkbt on Jun 10, 2015

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

mmakarin on May 15, 2016

Had the same with webpack 2 and css-modules on background: url("\./img/logo.png"); //work helped

aspirisen on Apr 10, 2017

I know one more fix for less: ~"url()".

iloginov on Jan 15, 2017

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.

skyiea on May 24, 2016

make sure you install less: npm install less -D less-loader won’t auto install less

MarkoCen on May 15, 2016

Any update to this? Having near-exactly the same error as @NicoBurno - Using:

webpack@2.3.2
css-loader@0.27.3
postcss-loader@1.3.3
less-loader@4.0.2

neutraali on Mar 29, 2017

@michael-ciniawsky there are two error sections:

Section 1

ERROR in ./~/css-loader?{“modules”:true,“importLoaders”:1,“localIdentName”:“[name][local][hash:base64:5]“}!./~/postcss-loader!./~/less-loader/dist?{“paths”:[”/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less Module not found: Error: Can’t resolve ‘img/logo.png’ in ‘/var/www/lb/src/public/components/views/footer’ @ ./~/css-loader?{“modules”:true,“importLoaders”:1,“localIdentName”:"[name][local]__[hash:base64:5]”}!./~/postcss-loader!./~/less-loader/dist?{“paths”:[“/var/www/lb/src/public/styles”]}!./src/public/components/views/footer/styles.less 6:2491-2514 @ ./src/public/components/views/footer/styles.less @ ./src/public/components/views/footer/index.js @ ./src/public/components/views/index.js @ ./src/public/components/index.js @ ./src/public/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://0.0.0.0:9100 webpack/hot/dev-server ./index.js

ERROR in ./src/public/components/views/footer/styles.less Module build failed: Error at factoryCallback (/var/www/lb/node_modules/webpack/lib/Compilation.js:259:39) at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:234:19 at onDoneResolving (/var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:59:20) at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:126:20 at /var/www/lb/node_modules/async/dist/async.js:3694:9 at /var/www/lb/node_modules/async/dist/async.js:359:16 at iteratorCallback (/var/www/lb/node_modules/async/dist/async.js:933:13) at /var/www/lb/node_modules/async/dist/async.js:843:16 at /var/www/lb/node_modules/async/dist/async.js:3691:13 at apply (/var/www/lb/node_modules/async/dist/async.js:21:25) at /var/www/lb/node_modules/async/dist/async.js:56:12 at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:121:22 at onResolved (/var/www/lb/node_modules/enhanced-resolve/lib/Resolver.js:70:11) at loggingCallbackWrapper (/var/www/lb/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19) at afterInnerCallback (/var/www/lb/node_modules/enhanced-resolve/lib/Resolver.js:138:10) at loggingCallbackWrapper (/var/www/lb/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

ERROR in /var/www/lb/node_modules/extract-text-webpack-plugin/loader.js??ref–2-0!/var/www/lb/node_modules/style-loader/index.js!/var/www/lb/node_modules/css-loader/index.js??ref–2-2!/var/www/lb/node_modules/postcss-loader/index.js!/var/www/lb/node_modules/less-loader/dist/index.js??ref–2-4!/var/www/lb/src/public/components/views/footer/styles.less doesn’t export content

Section 2

ERROR in ./~/css-loader?{“modules”:true,“importLoaders”:1,“localIdentName”:“[name][local][hash:base64:5]“}!./~/postcss-loader!./~/less-loader/dist?{“paths”:[”/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less Module not found: Error: Can’t resolve ‘img/logo.png’ in ‘/var/www/lb/src/public/components/views/footer’ @ ./~/css-loader?{“modules”:true,“importLoaders”:1,“localIdentName”:"[name][local]__[hash:base64:5]”}!./~/postcss-loader!./~/less-loader/dist?{“paths”:[“/var/www/lb/src/public/styles”]}!./src/public/components/views/footer/styles.less 6:2491-2514

NicoBurno on Mar 22, 2017

Please try again with less-loader >= v4.0.0, if there are still regressions I will reopen 😛

michael-ciniawsky on Mar 21, 2017

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.

alex-shamshurin on Sep 22, 2016

@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) + ")+\"";

        urlRequest = loaderUtils.urlToRequest(url, root);
        return "\"+require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")+\"";

Everything works fine.

nkbt on Jun 10, 2015