如何在webpack中加载sass样式表中使用的图像？

Question

I am using Webpack to bundle my modules and using sass for styling purpose in a react based application.

Using a seperate style-sheet I am setting the background-image of a component and loaded that style-sheet in index.js . All the styles in style-sheet gets applied to that component except background image .

Here is my sample style-sheet

$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 that problem would be explicitly require the image and then create inline style for react components.

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

But I want to load all the images from my image folder as soon as my style-sheet loads not by requiring each image separately.

My webpack config file is

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

I may be missing some trivial points. Any help is appreciated.

Answer 1

Ahh.... After a long hours of debugging I have finally found the issue. It was my foolishness because of which I struggled. I wanted to delete this question but thought that it would help new comers like me when the stuck to similar issues.

Problem was here

loader: 'url-loader?limit=10000'

I was setting the limit to file size of 10kb without really knowing what it does. And the image which I was loading was of size 21kb ! This happens when you copy some else webpack config files :) Sign of javascript fatigue !

Answer 2

When using webpack to load your css and the assets they access, your css needs to follow the same module naming rules you use in your JavaScript import or require calls.

Assuming the img folder is in the root of your source tree, you should refer to it like this 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');

Or just go completely relative. Assuming you your source code is like this:

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

Your styles.scss could 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 similar problem but with images with '.jpeg' extension. Change extension to '.jpg' helped me for some reason.