Separate fonts and css using webpack

Question

What I'm trying to achieve is to extract .less into .css files with fonts and to put each in separate directories like so:

web/
   assets/
      css/
         - style.css
      fonts/
         - glyphicons-halflings-regular.eot
      js/
         - style.js

But the point is that the css file indicates the fonts directory on the same level.

style.css

...src:url(./fonts/glyphicons-halflings-regular.eot)...

webpack.config.js

const path = require("path");

const webpack = require("webpack");

const merge = require('webpack-merge');
const validate = require('webpack-validator');

const parts = require('./lib/parts');

const PATHS = {
    style: path.join(__dirname, 'sources', 'less'),
    build: path.join(__dirname, '..', 'web/assets')
};

const common = {
    entry: {
        style: PATHS.style
    },
    output: {
        path: PATHS.build,
        filename: './js/[name].[chunkhash].js',
        chunkFilename: '[chunkhash].js',
        publicPath: 'assets/'
    }
};

var config;

switch (process.env.npm_lifecycle_event) {
    case 'build':
        config = merge(
            common,
            parts.extractStyles(PATHS.style)
        );
        break;
}

module.exports = validate(config);

lib/parts.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

exports.extractStyles = function(paths) {
    return {
        module: {
            loaders: [
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
                    include: paths
                },
                {
                    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: './fonts/glyphicons-halflings-regular.[ext]'
                    }
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].[chunkhash].css')
        ]
    };
};

Any help would be apreciated.

Answer 1

So I managed to solve my problem using the options parameter in ExtractTextPlugin.extract:

lib/parts.js

exports.extractStyles = function(paths) {
    return {
        module: {
            loaders: [
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    loader: 'file-loader',
                    query: {
                        name: '../fonts/glyphicons-halflings-regular.[ext]'
                    }
                },
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader', {publicPath: '../'}),
                    include: paths
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    loader: 'file-loader',
                    query: {
                        name: './fonts/glyphicons-halflings-regular.[ext]'
                    }
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].[chunkhash].css')
        ]
    };
};