Why I can't use background image in scss when I use webpack.js?

Question

I use webpack.js for build project: jade/scss/js/node.js My SCSS will be compiled to CSS:

 //SCSS
    .heading {
     background: url("/img/bg.png");
    }

  //CSS
   .heading {
   background- image:url('data:image/svg+xml;base64,...');

image is available on url: http://localhost:3000/img/bg.png

But it's not displaying as background-image. I know that I should use url/file-loader to include images in css next config works, but I can't use images in scss/css files

{
 entry: "./src/js/main.js",
 devtool: "source-map",
 output: {
  path: __dirname + "/public",
  filename: "bundle.js"
},
module: {
  loaders: [
   {
    test: /\.css$/,
    loaders: ["style", "css"]
   },
   {
    test: /\.scss$/,
    loaders: ["style", "css?sourceMap", "sass?sourceMap"]
   },
   {
    test: /\.png$/,
    loaders: ["url-loader", "file-loader?sourceMap"]
   }
 ]
 }
}

If you're not getting the result you expected, you need to show the Sass code and the compiled results. — cimmanon
Is that the actual output? Because a space in there in background-image is invalid. Also, that is the completely wrong mime type for a png. — cimmanon

Sean Larkin Sean Larkin · Accepted Answer · 2016-04-25T21:02:47

I would recommend using an additional loader like this one sass-loader has some known issues with resolving URLs in the past so this may be a solution for you.

Why I can't use background image in scss when I use webpack.js?

1 Answers