Webpack2 configuration problem

[JiDai]

Here is my tree :

webpack.config.js
www/
  static/
    sass/
      main.scss
      partials/
        _button.scss
    images/
      button.png

Here my loader config

{
  test: /main\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
    }, {
        loader: 'postcss-loader'
    }, {
        loader: 'resolve-url-loader'
    }, {
        loader: 'sass-loader',
        options: {
            sourceMap: true,
            includePaths: ['./www/static/sass']
        }
    }],
})

And the output tree I want :

www/
  static/
    build/
      css/
        main.css
      images/
        button.png

In buttons.sccs file I put :

button {
  background: url(../images/button.png)
}

But it will be resolve in css file as :

button {
  background: url(images/button.png)
}

Why ? I don't understand how the path in CSS compiled file is deduced Thanks,

[Danita]

I have the same problem, as I understand it's a problem with the ExtractTextPlugin.

[Danita]

Solved specifying publicPath: "../" on the ExtractTextPlugin.extract() invocation, as follows:

module: {
  rules: [      
    {
      test: /\.scss$/,
      use: extractSass.extract({
        use: [
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },            
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
        publicPath: "../",
      })
    },
  ]
}

But then I don't need resolve-url-loader anymore because I don't have nested assets.

[bholloway]

Thanks @Danita

So @JiDai I am going to close this issue based on @Danita's solution. We can reopen later if necessary.

[JiDai]

Ok thanks, the option publicPath in Extract plugin did worked for me. But I did not specified the webpack publicPath correctly, so once that fixed, it worked.