Wie kann ich den load image(s) in sass-stylesheet im webpack?

Ich bin mit Webpack zu bündeln, meine Module und mit sass für styling Sinn in einen reagieren basierte Anwendung.

Verwendung einer separaten style-sheet ich bin der Einstellung von hintergrund-Bild von einer Komponente geladen und das style-sheet in index.js. Alle Stile, die im style-sheet angewendet wird, um die Komponente außer Hintergrundbild.

Hier ist mein Beispiel-Stylesheet

$bg-img: url('/img/bg.jpg');

.show {
    position: relative;
    background: $black $bg-img center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

Einen Weg, um dieses problem zu lösen würde explizit verlangen, das Bild und erstellen Sie inline-Formatvorlagen für Komponenten reagieren.

img1 = document.createElement("img");
img1.src = require("./image.png");

Aber ich will laden Sie alle Bilder aus meinem Bilder-Ordner, sobald mein style-sheet lädt nicht durch eine jedes Bild separat.

Mein webpack config-Datei ist

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      },
      { 
        test: /\.(png|jpg)$/,
        include: path.join(__dirname, 'img'),
        loader: 'url-loader?limit=10000' 
     } //inline base64 URLs for <=10k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Ich möglicherweise fehlen ein paar unbedeutende Punkte. Jede Hilfe ist willkommen.

InformationsquelleAutor WitVault | 2016-02-10
Schreibe einen Kommentar