Как настроить webpack resolve-url-plugin правильно?

Question

[Andrey Dyrkov]

У меня есть проект

src
---components
------header
---------header.scss
---public
------img
---------header-background.png

в файле header.scss у меня есть импорт картинки header-background.png

.header{
  background:url('../../public/img/header-background.png') left top no-repeat;
}

Данная картинка подключает всё нормально, но она прокидывается в папку build моего проекта, а там в папку img

build
---css
------index.css //мой файл который подключает картинку
---img
------header-background.png

Но url получается неправильный и данная картинка никогда не подключиться в build.

Для решения данной проблемы я использовал resolve-url-plugin, но он мне не сильно помог,
С его использованием я из

.header{
  background:url('../../public/img/header-background.png') left top no-repeat;
}

получаю

.header {
  background: url(img/header-background.png) left top no-repeat;
}

Это лучше, но картинку он в итоге ищет внутри папки css, мне нужно чтобы url был ../img/header-background.png.

Вот webpack.config.js

module.exports = {
  ...
  rules:[
     {
      test:/\.(css|scss|sass)$/,
      use:ExtractTextPlugin.extract({
        use:[
          {loader:'css-loader',options:{sourceMap:true}},
          {loader:'resolve-url-loader',options:{sourceMap:true}},
          {loader:'fast-sass-loader',options:{sourceMap:true}}
          ]
      }),
    },
  ],
  ...
}

Как настроить мне данный загрузчик так, чтобы он всё же понимал что css будет в папке css и нужно выйти из неё сначала?

Comments

[Andrey Dyrkov]

Можно поступить по другому, просто писать в sass уже путь как в build, в настройках css-loader,fast-sass-loader добавить url:false;