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

Trash Can · Accepted Answer · 2017-07-11 15:00:09Z

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, 2017 at 15:00

Trash Can

6,8325 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jack Skeletron Over a year ago

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 Over a year ago

And also.. does alias work into "url()" or it's used only for @import or require?

Trash Can Over a year ago

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

Jack Skeletron Over a year ago

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?

Trash Can Over a year ago

it should presumably work, what is the error message?

|

Collectives™ on Stack Overflow

Webpack cannot resolve relative path

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related