Как использовать изображения в CSS с Webpack

Я делаю настройку React с Webpack и пытаюсь сделать то, что кажется простым. Я хочу, чтобы веб-пакет включал изображения и сводил их к минимуму, как я, используя gulp, но я не могу понять это. Я просто хочу иметь возможность связать изображение в моем CSS следующим образом:

/* ./src/img/background.jpg */

body { background: url('./img/background.jpg'); }

У меня есть все мои папки css/js/img в папке src. Webpack выводит в папку dist, но я не могу понять, как получить туда изображения.

Вот моя настройка веб-пакета:

 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/dev-server',
   './src/index.js'
  ],
  output: {
  path: path.join(__dirname, 'dist'),
  //  publicPath: './dist',
  filename: 'bundle.js'
  },
  plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
  template: './src/index.html'
   })
  ],
  module: {
  loaders: [{
   exclude: /node_modules/,
   test: /\.js?$/,
   loader: 'babel'
   }, {
  test: /\.scss$/,
  loader: 'style!css!sass'
    }, {
  test: /\.(png|jpg)$/,
  loader: 'file-loader'
  }]
 },

 devServer: {
  historyApiFallback: true,
  contentBase: './dist',
  hot: true
  }
};
Источник

3 ответа

Решение

Я застрял с подобной проблемой и обнаружил, что вы можете использовать url-loader Разрешить "url()" операторы в вашем CSS, как и любые другие операторы require или import.

Чтобы установить его:

npm install url-loader --save-dev

Он установит загрузчик, который может преобразовывать разрешенные пути в строки BASE64.

В вашем файле конфигурации webpack используйте url-loader в загрузчиках

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader'
}

Также убедитесь, что вы правильно указали свой публичный путь и путь к изображениям, которые пытаетесь загрузить.

Источник

Использование background-image: url('./img/background.jpg') в файле scss сработало для меня, без url-loader. Был только загрузчик файлов для.png|.jpg|... и т. Д.

Источник

Если вы пришли сюда из Google иfile-loaderниurl-loaderне работает для вашей версии веб-пакета (5.x), вот простой способ сделать это, на который ответил @SomoKRoceS: /questions/59668954/razreshenie-url-adresa-fonovogo-izobrazheniya-css-s-pomoschyu-webpack/60288445#60288445

      {
  test: /\.(jpg|png|svg|gif)$/,
  type: 'asset/resource',
},
Источник
Другие вопросы по тегам