Webpack cannot resolve relative path

Question

I have this folder structure

This is my webpack.config.js

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        bundle: ['./src/index.js',
                 './assets/style.less']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/dist'),
        publicPath: path.resolve('/webpackdemo/web/dist/')
    },
    module: {    
        rules: [
            {
                test: /\.less$/,
                use:  ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "resolve-url-loader", "less-loader"]
              })
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=/fonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css'),
        new CleanWebpackPlugin(['web/dist'])
    ]
};

assets/style.less

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,500,600,700&subset=latin,latin-ext);

@import "linearicons/linearicons.less";

body{
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
}

then assets/linearicon/linearicon.less

@font-face {
    font-family: 'linearicons';
    src:url('fonts/Linearicons-Free.eot?w118d');
    src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),
        url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
        url('fonts/Linearicons-Free.woff?w118d') format('woff'),
        url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
        url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
    font-weight: normal;
    font-style: normal;
}

The problem is that compiling ends in errors because of the url("fonts/Linearicon-*).

ERROR in ./node_modules/css-loader!./node_modules/resolve-url-loader?root=./../!./node_modules/less-loader/dist/cjs.js!./assets/style.less Module not found: Error: Can't resolve './linearicons/fonts/Linearicons-Free.eot?w118d' in '/home/wwwhome/webpackdemo/assets' @ ./node_modules/css-loader!./node_modules/resolve-url-loader?root=./../!./node_modules/less-loader/dist/cjs.js!./assets/style.less 6:173-230 @ ./assets/style.less @ multi ./src/index.js ./assets/style.less

For the compiler it is relative to folder "linearicons" but i would like to resolve it always in assets/fonts. I could change all the urls in url('../fonts/Linearicons-Free.eot?w118d') but it's not convenient as this is a bit part of a bigger theme with hundreds of less files. I've tryied to add also a root parameter to resolve-url-loader?root=assets/fonts but it didn't work.

Any idea?

Thanks

score 2 · Answer 1 · answered Jul 11 '17 at 15:00

2

You could add resolve.alias for that

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        bundle: ['./src/index.js',
                 './assets/style.less']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/dist'),
        publicPath: path.resolve('/webpackdemo/web/dist/')
    },
    module: {    
        rules: [
            {
                test: /\.less$/,
                use:  ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "resolve-url-loader", "less-loader"]
              })
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=/fonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css'),
        new CleanWebpackPlugin(['web/dist'])
    ],
    resolve: {
        alias: {
            linearicons: path.resolve(__dirname, 'fonts/')
        }
    }
};

answered Jul 11 '17 at 15:00

Trash Can

6,608
5
24
38

Thanks, added alias for `linearicons: path.resolve(__dirname, 'assets/fonts/')` but i have the same error... and what about `@import "linearicons/linearicons.less";` statement in assests/style.less? It shouldn't work (even if there's no error in output). – Jack Skeletron Jul 11 '17 at 15:35
And also.. does alias work into "url()" or it's used only for @import or require? – Jack Skeletron Jul 11 '17 at 15:39
As soon as you create an alias mapping for `linearicons` you cannot use it as the usual directory name anymore, it will be resolved to the directory which it points to as specified in the config file, or so `linearicons/linearicons.less` would be resolved to `assets/fonts/linearicons.less` which does not exist, you could use a different name for the alias – Trash Can Jul 11 '17 at 15:53
I've tried to set `fonts: path.resolve(__dirname, 'assets/fonts/')` it should work but it doesn't. This is why I think that aliases don't work inside URL ... Is it correct? – Jack Skeletron Jul 11 '17 at 18:26
it should presumably work, what is the error message? – Trash Can Jul 11 '17 at 18:27
Exactly the same posted in main thread... Tomorrow I'll try again just to be sure. I've done so many tests that I'm almost out of my head :D – Jack Skeletron Jul 11 '17 at 18:30
when using aliases, don't prefix it with anything, for example, `fonts/summernote.ttf` but not, `./fonts/summernote.ttf` – Trash Can Jul 11 '17 at 18:34
Ok, if you look at linearicons.less it's already referring to fonts like this. I'll update as soon as I'll test again. – Jack Skeletron Jul 11 '17 at 18:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/148965/discussion-between-jack-skeletron-and-dummy). – Jack Skeletron Jul 12 '17 at 06:49

Webpack cannot resolve relative path

1 Answers1