web-dev-qa-db-ger.com

Wie kann ich Bilder, die im sass Stylesheet verwendet werden, in das Webpack laden?

Ich verwende Webpack , um meine Module zu bündeln, und verwende sass für Stylingzwecke in einer reaktionsbasierten Anwendung.

Mit einem separaten Stylesheet setze ich das Hintergrundbild einer Komponente und lade dieses Stylesheet in index.js. Alle Stile im Stylesheet werden auf diese Komponente angewendet mit Ausnahme des Hintergrundbilds .

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

Eine Möglichkeit, dieses Problem zu lösen, besteht darin, das Bild explizit erforderlich zu machen und dann einen Inline-Stil für Reaktionskomponenten zu erstellen.

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

Aber ich möchte alle Bilder aus meinem Bildordner laden, sobald mein Stylesheet geladen ist nicht, indem jedes Bild einzeln benötigt wird.

Meine Webpack-Konfigurationsdatei 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: './'
  }
};

Möglicherweise fehlen mir einige unbedeutende Punkte. Jede Hilfe wird geschätzt.

9
WitVault

Ahh .... Nach langem Debuggen habe ich endlich das Problem gefunden. Es war meine Dummheit, um die ich mich bemühte. Ich wollte diese Frage löschen, dachte aber, dass sie Neulingen wie mir helfen würde, wenn sie an ähnlichen Problemen festhielten.

Problem war hier

loader: 'url-loader?limit=10000' 

Ich habe das Limit auf die Dateigröße von 10kb gesetzt, ohne wirklich zu wissen, was es tut. Und das Bild, das ich lud, hatte die Größe 21kb ! Dies geschieht, wenn Sie andere Webpack-Konfigurationsdateien kopieren :) Zeichen von Javascript-Ermüdung!

17
WitVault

Wenn Sie Webpack verwenden, um Ihre CSS und die Assets, auf die sie zugreifen, zu laden, muss Ihre CSS denselben Modulbenennungsregeln folgen, die Sie in Ihren JavaScript-import- oder require-Aufrufen verwenden.

Angenommen, der Ordner img befindet sich im Stammverzeichnis des Quellbaums, sollten Sie ihn in scss wie folgt beschreiben:

// note there is no leading /, which tells "require()" to start from the root of your source tree
$bg-img: url('img/bg.jpg');

Oder einfach ganz relativ gehen. Angenommen, Ihr Quellcode ist so:

/src/styles.scss
/img/bg.jpg

Ihr styles.scss könnte einen relativen Pfad verwenden:

// note the path is relative to where the style.scss is in your source tree.
$bg-img: url('../img/bg.jpg');
4
Brandon

Ich hatte ein ähnliches Problem, aber mit Bildern mit der Erweiterung ".jpeg". Die Erweiterung zu '.jpg' zu ändern half mir aus irgendeinem Grund.

0
Aliaksei