web-dev-qa-db-fra.com

Comment puis-je charger des images utilisées dans une feuille de style sass dans Webpack?

J'utilise Webpack pour regrouper mes modules et j'utilise sass à des fins de style dans une application basée sur react.

Utilisation d'une feuille de style distincte Je configure l'image de fond d'un composant et la charge dans index.js. Tous les styles de la feuille de style sont appliqués à ce composant sauf l'image d'arrière-plan .

Voici mon exemple de feuille de style

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

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

Une façon de résoudre ce problème serait de demander explicitement l'image, puis de créer un style en ligne pour les composants réactifs.

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

Mais je veux charger toutes les images de mon dossier d’images dès le chargement de ma feuille de style pas en demandant chaque image séparément.

Mon fichier de configuration webpack est 

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

Il se peut que je manque des points triviaux. Toute aide est appréciée.

javascriptcssreactjswebpackwebpack-style-loader
9
WitVault

Ahh .... Après de longues heures de débogage, j'ai enfin trouvé le problème. C'était ma folie à cause de laquelle j'ai lutté. Je voulais supprimer cette question, mais je pensais que cela aiderait les nouveaux arrivants comme moi quand ils étaient coincés dans des problèmes similaires.

Le problème était là

loader: 'url-loader?limit=10000' 

Je fixais la limite de taille de fichier de 10 Ko sans vraiment savoir ce que cela faisait. Et l'image que je chargeais était de taille 21kb ! Cela se produit lorsque vous copiez d’autres fichiers de configuration Webpack :) Signe de fatigue javascript!

17
WitVault

Lorsque vous utilisez webpack pour charger vos fichiers CSS et les ressources auxquelles ils ont accès, ceux-ci doivent suivre les mêmes règles de dénomination de module que celles que vous utilisez dans vos appels JavaScript import ou require.

En supposant que le dossier img se trouve à la racine de votre arborescence source, vous devriez vous y référer comme ceci dans scss:

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

Ou juste aller complètement relatif. En supposant que votre code source ressemble à ceci:

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

Votre styles.scss pourrait utiliser un chemin relatif:

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

J'ai eu le même problème mais avec des images avec l'extension '.jpeg'. Changer l'extension en '.jpg' m'a aidé pour une raison quelconque.

0
Aliaksei