javascript - How can I load image(s) used in sass stylesheet in webpack? - Stack Overflow

admin管理员组

文章数量:1180476

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.

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.

• javascript
• css
• reactjs
• webpack
• webpack-style-loader

Share Improve this question Follow edited Feb 10, 2016 at 20:38 WitVault asked Feb 10, 2016 at 20:30 WitVaultWitVault 24.1k2020 gold badges106106 silver badges137137 bronze badges 1

• What is the version of webpack here ? – Shaggy Commented May 9, 2022 at 1:19

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 24

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 !

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');

I had similar problem but with images with '.jpeg' extension. Change extension to '.jpg' helped me for some reason.

本文标签： javascriptHow can I load image(s) used in sass stylesheet in webpackStack Overflow