Come posso caricare le immagini utilizzate nel foglio di stile sass nel webpack?

Question

Sto usando Webpack per raggruppare i miei moduli e usare sass per lo styling in un'applicazione basata su reagenti.

Uso di un foglio di stile separato Sto impostando l'immagine di sfondo di un componente e caricato quel foglio di stile in index.js. Tutti gli stili nel foglio di stile vengono applicati a quel componente eccetto l'immagine di sfondo.

Ecco il mio campione foglio di stile

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

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

Un modo per risolvere il problema sarebbe richiede esplicitamente l'immagine e quindi creare stile in linea per reagire componenti.

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

ma voglio carico tutte le immagini dalla mia cartella delle immagini, non appena i miei carichi stile fogli non richiedendo ogni immagine separatamente.

mio file di configurazione webpack è

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

posso mancare alcuni punti banali. Qualsiasi aiuto è apprezzato.

Answer 1

Ahh .... Dopo lunghe ore di debugging ho finalmente trovato il problema. È stata la mia follia a causa della quale ho faticato. Volevo eliminare questa domanda ma ho pensato che avrebbe aiutato i nuovi arrivati ​​come me quando sono rimasti bloccati su problemi simili.

Il problema era qui

loader: 'url-loader?limit=10000'

stavo impostando il limite alla dimensione del file di 10kb senza sapere quello che fa. E l'immagine che stavo caricando era di dimensioni 21kb! Questo succede quando copi altri file di configurazione del webpack :) Segno di fatica javascript!

Answer 2

Quando si utilizza webpack per caricare il css e le risorse a cui accede, il proprio css deve seguire le stesse regole di denominazione dei moduli utilizzate nelle chiamate JavaScript import o require.

Supponendo che la cartella img è nella radice del vostro albero dei sorgenti, si deve fare riferimento ad esso come questo in SCSS:

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

o semplicemente andare del tutto relativa. Dando per scontato che il codice sorgente è come questo:

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

tuo styles.scss potrebbe utilizzare un percorso relativo:

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

Answer 3

Ho avuto problemi simili ma con immagini con estensione ".jpeg". Cambiare l'estensione in ".jpg" mi ha aiutato per qualche motivo.