Resolve-url-loader doesn't appear to make any change to compiled CSS

[jasonlav]

extract-text-webpack-plugin: ^3.0.0 node-sass: ^4.5.3 sass-loader: ^6.0.6 webpack: ^3.5.1 resolve-url-loader: ^2.1.0

app.css appears to remain unchanged regardless of implementation of resolve-url-loader.

File structure

example/
example/
├── dist/
│    ├── assets
│    │    ├── media
│    │    │    └── logo.png
│    │    └── styles
│    │        ├── app.css
│    │        └── app.css.map
│    ├── index.html
│    └── app.bundle.js
└── src/
    ├── assets
    │    ├── media
    │    │    └── logo.png
    │    └── styles
    │        └── app.scss
    └── app.js

app.scss

body {
  background: url(../media/logo.png);
}

app.css

body {
  background: url(assets/media/logo.png); //This should be ../media/logo.png
}

app.js

require('./assets/styles/app.scss');

webpack.config.js

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

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            }, {
              loader: 'resolve-url-loader'
            }, {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }, {
        test: /\.png$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/media/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'assets/styles/app.css'
    })
  ]
}

[bholloway]

At first glance...

The way you are using extract text you are moving the CSS after the bundle is generated. This makes the url paths wrong.

I have never successfully changed structure like this, not for want of trying. I had to settle for a flat structure. (My experience was webpack 1 though.)

[yawlhead91]

Im having the same issue

[jasonlav]

Solution is unrelated to resolve-url-loader. See the publicPath option on the ExtractTextPlugin. It is also recommended to use the include option as well.