VIKINGVyksa
@VIKINGVyksa
front-end developer

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

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

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 и нужно выйти из неё сначала?
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы