Как исправить, что webpack resol-url-loader не работает?

Question

Resolve-url-loader не разрешает изображения / шрифты в моих css файлах. Моя структура папок выглядит следующим образом:

src 
   public
      images
           -banner-bg.jpg
      stylesheets
         css
           -basic.css with background: url(../../images/banner-bg.jpg)
         scss
           -main.scss with @import "../css/basic.css";

Выходные папки:

dist
  public
     images
           -banner-bg.jpg
     stylesheets
           -main-output.css

Изображения и шрифты отображаются нормально на сервере разработки и правильно копируются в производство. main-output.css - при проверке - показывает

background:url(public/images/banner-bg.jpg

вместо ожидаемого

background:url(../images/banner-bg.jpg)

И консоль браузера показывает ошибку:

GET файл: /// home / ustrd / Documents / myproject12 / dist / public / stylesheets / public / images / banner-bg.jpg net :: ERR_FILE_NOT_FOUND

plugins: [
   new MiniCssExtractPlugin({
     filename: path.join("public", "stylesheets", "[name].css")
   })
 ],
 module: {
   rules: [
     {
       test: /\.(css|scss)$/,
       use: [
         MiniCssExtractPlugin.loader, 
         {
           loader: "css-loader",
           options: {
             sourceMap: true,
             importLoaders: 2
           }
         },
         {
           loader: "postcss-loader",
           options: {
             ident: "postcss",
             plugins: () => [new PostcssPresetEnv()]
           }
         },
         {
           loader: "resolve-url-loader",
           options: { sourceMap: true }
         },
         { loader: "sass-loader", options: { sourceMap: true } } 
       ]
     },

Есть идеи, как это исправить?

Answer 1

Полагаю, что resolve-url-loader не знает о местонахождении вашего финального main-output.css и ожидает, что оно будет на крыше dist.Вы можете попробовать использовать пользовательскую функцию join для исправления путей:

{
  loader: "resolve-url-loader",
  options: {
    sourceMap: true,
    join: (uri, base) => path.join('../..', base, uri);
  }
},

Это должно вывести что-то вроде этого:

background:url(../../public/images/banner-bg.jpg)

Хотя еще не проверял.Проверьте как это работает для некоторых деталей.Также обратите внимание на настройку css-loader url .

Возможно, будет проще изменить местоположение main-output.css:

new MiniCssExtractPlugin({
     filename: "[name].css"
})