Css-loader: the publicPath dosen't resolve the css background url path, just use ''+'' concat the string

Created on 22 Dec 2015  ·  6Comments  ·  Source: webpack-contrib/css-loader

my src is

├── src
|   ├── css
|   |    └──  index.less
|   ├── img
|   |    └── bg.png
|   └── js
|        └── main.js
.

but i want to compile to dist folder as the same structure like


├── dist
|   ├── css
|   |    └── index.css
|   ├── assets
|   |    └── bg.png
|   └── js
|        └── bundle.js
├── src
.   └── ..

my webpack.config.js is like that

'use strict'

var DEV_JS_PATH = __dirname + '/www/static/js/';
// var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');

module.exports = {
    entry: {
        index: DEV_JS_PATH + 'index.jsx',
        history: DEV_JS_PATH + 'history.jsx'
    },
    output: {
        path: __dirname + '/www/dist/js',
        filename: '[name].js'
    },
    resolve: {
        extensions: ["", ".js", ".jsx"],

    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style', 'css!less', {
                publicPath: '/dist/css/'
            })
        }, {
            test: /(\.png|\.jpg)$/,
            loader: 'url?limit=8000&name=../img/[name].[ext]'
        }, {
            test: /\.jsx$/,
            loader: 'babel-loader'
        }, {
            test: /\.(eot|ttf|svg|woff(2)?)/,
            loader: 'file-loader'
        }]
    },
    plugins: [  
        new ExtractTextPlugin('../css/[name].css'),
    ]
}

and my less the background img url is

.content {
    height: 80%;
    background: url(../img/bg.png) no-repeat;
    background-size: cover;
    text-align: center;
}

my expectations is

.content {
    height: 80%;
    background: url(dist/img/bg.png) no-repeat;
    background-size: cover;
    text-align: center;
}

but it is like that

.content {
    height: 80%;
    background: url(dist/css/../img/bg.png) no-repeat;
    background-size: cover;
    text-align: center;
}

i watch the source , i see that

/* 22 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "../img/bg.png";

/***/ },
/* 23 */
Bug

All 6 comments

+1

Bump

@monkindey Could you try with removing ../ ?

Maybe we can remove the ../ and set the output like that

output: {
     path: __dirname + '/www/dist',
     publicPath:  '/www/dist/',
     filename: '[name].js'
},

@monkindey can your create minimal reproduced test repo :question: :+1:

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

Was this page helpful?
0 / 5 - 0 ratings