Задать вопрос

Как решить проблему с загрузкой картинок background-image при сборке webpack?

Сразу приведу фрагменты конфигов и сжатую структуру проекта. Использую самую последнюю версию webpack, webpack-dev-server, css-loader и less-loader. Вместо url-loader и file-loader использую встроенные возможности webpack 5 (asset/resource и asset/inline).

Правило загрузки less-файлов (webpack):
{
  test: /\.less$/,
  exclude: path.resolve(__dirname, 'node_modules'),
  use: [
    isProd ? MiniCssExtractPlugin.loader : "style-loader",
    {
      loader: 'css-loader'
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            "postcss-flexibility",
            ["postcss-preset-env", { browsers: browserList }],
          ]
        }
      }
    },
    {
      loader: 'less-loader',
      options: {
        lessOptions: {
          includePaths: [
            // тут некоторые пути
          ]
        }
      }
    }
  ]
},


Правило загрузки изображений (webpack):
{
  test: /\.(png|jpe?g|gif)$/,
  type: 'asset/resource',
  generator: {
    filename: isProd ? 'files/[name]-[contenthash].[ext]' : 'files/[name].[ext]'
  },
},


Для запуска конфигурации использую webpack-dev-middleware:
const compiler = webpack(config);

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    stats: config.stats
  })
);


Сжатая структура проекта такая:
project
  |
  |---src
  |     |---SomeComponent
  |     |---styles.less
  |---images
  |     |---main-logo.png
  |---webpack.config.js
  |---package.json


Фрагмент стилей в файле styles.less:
.main-logo-container {
  background-image: url(/images/main.logo);
}


Проблема в том, что при старте проекта (dev и build), вебпак ругается на то, что не может найти файл images/main.logo, указанный в файле стиля styles.less:
Module not found: Error: Can't resolve '/images/main.logo' in 'project/src'


Насколько понимаю, если положить папку images внутрь src, то проблем быть не должно, но к сожалению нет возможности ее туда поместить. Как решить эту проблему с такой структурой папок?

Заранее спасибо за подсказки.
  • Вопрос задан
  • 238 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы