How to load images used in sass stylesheet in webpack?

Question

I use Webpack to bundle my modules and use sass for styling purposes in a reaction based application.

Using a separate style, I set the background image of the component and load that style into index.js . All styles in the stylesheet apply to this component except for the background image .

Here is my sample 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; } 

One way to solve this problem is to explicitly require an image, and then create an inline style for the responsive components.

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

But I want to download all the images from the image folder as soon as my stylesheet loads , without requiring each image separately.

My webpack config file

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

Perhaps I am missing some trivial points. Any help is appreciated.

Answer 1

Ahh .... After long hours of debugging, I finally found a problem. It was my stupidity, because of which I fought. I wanted to delete this question, but thought it would help new visitors like me when you encounter similar problems.

The problem was here

loader: 'url-loader?limit=10000'

I set a file size limit of 10kb without knowing what it does. And the image I uploaded was 21kb in size! This happens when you copy some other webpack configuration files :) Fatigue sign javascript!

Answer 2

When using webpack to download and access your css, your css must follow the same module naming conventions that you use in your JavaScript import or require calls.

Assuming the img folder is at the root of your source tree, you should reference it like this: scss:

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

Or just completely relate. Assuming your source code is as follows:

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

Your styles.scss can use a relative path:

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

Answer 3

I had a similar problem, but with images with the .jpeg extension. Changing the extension to '.jpg' helped me for some reason.