less-loader is trying to resolve url references relative to the starting point(root less file) instead of using the current file

[ravipatipushkar]

I am getting the below error when trying to use the less loader with webpack to compile my less files.

ERROR in ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
     @ ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less 6:92-125

Following is my directory structure

---Test
    |---App
    |     |---styles
    |     |       |---fontImport
    |     |       |      |---randomfont.eot
    |     |       |---app.less
    |     |---  app.js             
    |---webpack.config.js

Following are the contents of
app.js
require('./styles/app.less');

app.less

@import "./fontImport/fontimports.less";

body{
  background: #fafafa;
  color: #212121;
  padding: 0;
  margin: 30;
  font-size: 60px;
}

fontImports.less

@font-face {
    font-family: 'Times New Roman';
    // Does not work
        src: ~"url('./fonts/randomfont.eot')";
    // Works
    //src: ~"url('./fontImport/fonts/randomfont.eot')";
    font-weight: normal;
    font-style: normal
}

I am using the below webpack config

var path = require('path');
var extractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './app/app.js',
    devtool: 'sourcemap',
    output: {
        filename: 'test.js',
        library: 'testlib',
        libraryTarget: 'var',
        path: './Content/Scripts',
        pathinfo: true
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.less/,
                loader: extractTextPlugin.extract(
                    "css?sourceMap!" +
                    "less?relativeUrls&noIeCompat"
                    )
            },
            { test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, loader: 'file?name=app/generated/[name].[ext]' },
        ]
    },
    plugins: [
        new extractTextPlugin("../css/styles.css"),
    ]
}

In fontImports.less, If I provide relative path of the font form fontImports.less, webpack command is failing with the below error.

Hash: 1c54ca6132cc3c5db535
Version: webpack 1.12.13
Time: 1313ms
      Asset     Size  Chunks             Chunk Names
    test.js  4.68 kB       0  [emitted]  main
test.js.map  5.28 kB       0  [emitted]  main
   [0] ./app/app.js 31 bytes {0} [built]
    + 3 hidden modules

ERROR in ./app/styles/app.less
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
 @ ./app/styles/app.less 6:90-123

ERROR in ./app/styles/app.less
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
    at C:\test\node_modules\webpack\lib\Compilation.js:229:38
    at onDoneResolving (C:\test\node_modules\webpack\lib\NormalModuleFactory.js:29:20)
    at C:\test\node_modules\webpack\lib\NormalModuleFactory.js:85:20
    at C:\test\node_modules\async\lib\async.js:726:13
    at C:\test\node_modules\async\lib\async.js:52:16
    at done (C:\test\node_modules\async\lib\async.js:241:17)
    at C:\test\node_modules\async\lib\async.js:44:16
    at C:\test\node_modules\async\lib\async.js:723:17
    at C:\test\node_modules\async\lib\async.js:167:37
    at C:\test\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:24:19
    at onResolved (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:38:18)
    at C:\test\node_modules\enhanced-resolve\lib\Resolver.js:127:10
    at C:\test\node_modules\enhanced-resolve\lib\Resolver.js:191:15
    at applyPluginsParallelBailResult.createInnerCallback.log (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:110:4)
    at loggingCallbackWrapper (C:\test\node_modules\enhanced-resolve\lib\createInnerCallback.js:21:19)
    at C:\test\node_modules\tapable\lib\Tapable.js:134:6
    at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\DirectoryDefaultFilePlugin.js:21:12)
    at Storage.provide (C:\test\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.stat (C:\test\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:132:20)
    at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\DirectoryDefaultFilePlugin.js:18:6)
    at Tapable.applyPluginsParallelBailResult (C:\test\node_modules\tapable\lib\Tapable.js:139:14)
    at Tapable.<anonymous> (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:103:8)
    at Tapable.Resolver.forEachBail (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:196:3)
    at Tapable.doResolve (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:102:7)
    at Tapable.resolve (C:\test\node_modules\enhanced-resolve\lib\Resolver.js:45:14)
    at Tapable.resolve (C:\test\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:23:14)
    at C:\test\node_modules\webpack\lib\NormalModuleFactory.js:82:29
    at C:\test\node_modules\async\lib\async.js:718:13
    at async.forEachOf.async.eachOf (C:\test\node_modules\async\lib\async.js:233:13)
    at _parallel (C:\test\node_modules\async\lib\async.js:717:9)
Child extract-text-webpack-plugin:
        + 3 hidden modules

    ERROR in ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less
    Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/randomfont.eot in C:\test\app\styles
     @ ./~/css-loader?sourceMap!./~/less-loader?relativeUrls&noIeCompat!./app/styles/app.less 6:90-123

If I provide the relative path from app.less, I am getting the expected result. Do I have to include any specific configuration to make the above work ?

You can repro this issue using the sample here

[duro]

I can confirm this is a problem. I am running into the exact same issue.

[oller]

I'm encountering this problem too, particularly when trying to import the .less flag library from the node_module https://github.com/lipis/flag-icon-css

In my less file for that module

@import "~flag-icon-css/less/flag-icon.less";

This resolves fine, and webpack starts importing this file. The problem is then within the flag node package, the relative paths to the individual flag svg files ../flags/1x1/es.svg look like they're being resolved relative to starting point of the less import into webpack, i.e. styles/app.less and not relative to the node_modules package.

The error, excuse all the loaders...

    ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/csslint-loader!./~/less-loader?sourceMap!./app/styles/profiler.less
    Module not found: Error: Cannot resolve 'file' or 'directory' ../flags/1x1/vg.svg in /app/styles
     @ ./~/css-loader?sourceMap!./~/postcss-loader!./~/csslint-loader!./~/less-loader?sourceMap!./app/styles/app.less 6:116980-117010

[jhnns]

This looks like the relativeUrls option is not applied. The less-loader usually applies it automatically, thus it should work out of the box. Could you remove the relativeUrls option in your loader config and see if it works?

[developit]

@jhnns Tried with relativeUrls true or false, same issue. This seems related to the way the file manager provided by the dynamically injected less plugin uses the shared context from less-loader to resolve paths for url() references within all nested files. I'm not familiar enough with Webpack's internals to know how to split this out.

Is there a way to re-apply less-loader to each new less file encountered?

[jhnns]

We need a small test-case that demonstrates this specific bug. We do have tests that this feature works under "normal" circumstances (I'm using the less-loader also in production and it works)

[developit]

@jhnns Yes, I have used less-loader many times without issue. I ran into this when (intentionally) attempting to apply less-loader to modules in node_modules. In particular, it happened when using namespaced NPM module names (@foo/bar).

That being said, I was actually able to fix my issue by simply dropping the relative filepath altogether. It still bundles the font properly via webpack, but seems to circumvent the path normalization based on original filename somehow.

src: url('./icons/foo.woff') format('woff');
src: url('/icons/foo.woff') format('woff');

[emmostrom]

I ran into this issue because the way I set up my webpack.config.js file - the paths were getting a mixture of forward and backwards slashes (context: __dirname + '/src/main/jsx').

Changed to use path.join and path.normalize

context: path.join(__dirname, '/src/main/jsx'),
...
output: {
path: __dirname,
filename: path.normalize('/src/main/webapp/js/app.js')
},
...
new ExtractTextPlugin(path.normalize('src/main/webapp/css/app.css'))

This stopped errors but no files were generated so also had to update to node 4.4.4

[tszymanek]

I had a similar issue and solved it in a hackish way:

http://stackoverflow.com/a/37293335/1874624

edit: updated my solution

[SplicePHP]

I found the problem. Since most less and scss files are stuck in other directories than where they build to, the css parser gets confused. I added an attribute to the css loader named rel to specify where the file would built to.
Here is the modified loader: https://github.com/SplicePHP/css-loader

Example usage:

    module: {
        loaders: [ //default less loader
            {
                test: /\.less$/,
                loader: ["style-loader", "css-loader","less-loader"],
                exclude: [ //exclude package in order not to get loaded via this loader
                    /\package\/less\/style.less$/
                ]
            },
            { //created custom loader to fix wrong rel path issue
                test: /\package\/less\/style.less$/,
                loader: [
                    "style-loader",
                    "css-loader?rel="+path.resolve(__dirname,'path/to/package/dist/css'),
                    "less-loader"
                ]
            }
        ]
    }

I am not 100% sure that the regex is best practice for detecting relative urls, just pulled it from stack overflow.
Works as far as I have tested. I tried to submit a pull request but I don't think it got through. If I don't hear anything by tomorrow I will resubmit the pull request to the css-loader git repo.

Not sure if I will be maintaining this fork, depends if another solution is found.

[jhnns]

Sorry guys, this feature is working under "normal" (=expected) circumstances. Please give us a minimal example so we can investigate this.

[SplicePHP]

Hi, here is an example repo that results in build errors:
https://github.com/almasaeed2010/AdminLTE.git

npm:

npm install admin-lte --save-dev

entry.js

require('admin-lte/build/less/AdminLTE.less');

Webpack Config
[I trimmed a lot of code out of my webpack config but here is the relevant code to illustrate the problem: have not tested this but I think you should get the idea. ]

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
    context: path.resolve(__dirname),
    output:
    {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        chunkFilename: "[name]_[chunkhash:20].js",
        sourceMapFilename: "[name].map"
    },
    module:
    {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                query:
                {
                    presets: ['es2015', 'react', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                loader: ["style-loader", "css-loader", "less-loader"],
                exclude: [
                    // /\less\/AdminLTE.less$/
                ]
            },
            // {
            //     test: /\less\/AdminLTE.less$/,
            //     loader: [
            //         "style-loader",
            //         "css-loader?rel="+path.resolve(__dirname,'node_modules/admin-lte/dist/css'),
            //         "less-loader"
            //     ]
            // },
            {
                /*
                 * embed images and fonts smaller than 5kb
                 * 'image-webpack-loader?optimizationLevel=7&..........'
                 */
                test: /\.(gif|png|jpg|jpeg|svg)($|\?)/,
                loaders: ['url?limit=5000&hash=sha512&digest=hex&size=16&name=resources/[name]-[hash].[ext]']
            },
            {
                test: /\.(woff|woff2|eot|ttf)($|\?)/,
                loaders: ['url?limit=5000&hash=sha512&digest=hex&size=16&name=resources/[name]-[hash].[ext]']
            }
        ]
    }
};

I commented out the code I currently use to fix the issue.

So this is what happens:
You include the less file from the admin-lte/build/less/ dir.
When it hits the css loader it thinks it is in admin-lte/build/less/ and can't find relative resources.
All the resources lay inside the admin-lte/dist/ dir.
The less file is supposed to built to admin-lte/dist/css/
Now any resources required like: url(../img/someimage.jpg) will try to load admin-lte/build/img/someimage.jpg instead of admin-lte/dist/img/someimage.jpg
The solution I propose is to make allowance for the build output dir to be specified in some way in order for the relative paths to load correctly in these cases.
I used the rel keyword in my example.
You can see an example of my hacked css-loader in the link supplied in the previous post.

Thanks.

[jhnns]

Thanks for providing an example @SplicePHP

Your assumptions are correct, but this is the expected behavior. The less-loader generates a single css file from multiple less files. That's why the css-loader tries to resolve all urls relatively from the less entry file.

When using webpack, it's best to put your binary assets like images and fonts inside your app or src or build folder (whatever you call it). Then you just reference them in your less file relatively like you would with any other JS import/require and things will work as expected. So, you don't need any path variable in your less files, because if you reference them relatively, things will just work.

[SplicePHP]

The problem is that most people are not in control of those variables. I am working on a pretty large project with a ton of node_modules and other git libraries. The standard is for less and scss files to be stored in another path to where the actual build is rendered to. Making these types of changes on third party libraries will be a nightmare for version control. I would have to fork nearly every git repo I use to modify the paths and I am not even sure that version control can be maintained with npm packages if these types of changes are made locally. This is a serious impediment for maintainability as far as I can tell, Stack Overflow is full of these bugs and no-one seems to have any answers. It is much easier to add a rel path variable to the css loader and no hacking of third party libraries is required. Making this small change fixes the problem and no backward compatibility is sacrificed. I will continue to use my custom css loader for now and will let you know if I find any bugs with my current implementation.