Hoe gebruik je afbeeldingen in css met Webpack

Ik ben bezig met het maken van een React w/ Webpack-configuratie en heb moeite om te doen wat een eenvoudige taak lijkt te zijn. Ik wil dat webpack afbeeldingen bevat en ze minimaliseert zoals ik met slok, maar ik kom er niet uit. Ik wil gewoon een afbeelding in mijn css kunnen linken, zoals:

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

Ik heb al mijn css/js/img-mappen in een src-map. Webpack voert uit naar een dist-map, maar ik kan er niet achter komen hoe ik afbeeldingen daar kan krijgen.

Hier is mijn webpack-configuratie:

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
  }
};

Antwoord 1, autoriteit 100%

Ik zat met een soortgelijk probleem en ontdekte dat je url-loaderom "url()"-instructies in uw CSS op te lossen zoals alle andere vereisten of import-instructies.

Om het te installeren:

npm install url-loader --save-dev

Het zal de loader installeren die opgeloste paden kan converteren als BASE64-strings.

Gebruik in uw webpack-configuratiebestand url-loader in loaders

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

Zorg er ook voor dat u uw openbare pad correct specificeert en het pad van afbeeldingen die u probeert te laden.


Antwoord 2

het gebruik van background-image: url(‘./img/background.jpg’) in het scss-bestand werkte voor mij, zonder url-loader. Had alleen file-loader voor .png|.jpg|… etc.

Other episodes