Failing to load background-image with sass-loader (Webpack)

Question

I'm having trouble trying to get the browser to successfully find a background image whilst using webpack and sass-loader/style-loader/css-loader.

The path seems to be right, because whenever I change it the compile process fails, but as it is, it is ok.

So far I have...

Component

import React from 'react'

const Image = () => (
   <div className='sprite-container sprite-1'>
   </div>
)

export default Image

CSS

.sprite-container {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   border: 1px solid blue; // I put this just to confirm the container div is there, which it is.
   background-image: url('/img/spritesheet.png');
   background-repeat: no-repeat;
   position: absolute;
   top: 250px;
   right: 20px;
}

.sprite-1 {
   background-position: -100px, -100px;
}

As it is, the div is transparent. The container is there but the background image fails to load. I'm new to compiling SASS in Webpack, so maybe this is something to do with my file structure.

This is the relevant part of my file tree:

- src
   - static (all static assets are served from this folder)
      - img
         -- spritesheet.png
   - styles
         -- app.scss
   -- app-client.js (importing app.scss here)

I'm importing the app.scss into my main js file, app-client.js (which React mounts to the application).

Does the path given in the background-image css property need to be relative the root directory or the stylesheet? I'm assuming the root directory (/static).

Any help appreciated.

UPDATE

File tree

- src
   - static (all static assets are served from this folder)
      - img
         -- spritesheet.png
      - js
         -- bundle.js
   - styles
         -- app.scss
   -- app-client.js (importing app.scss here)

webpack.config.js

const debug = process.env.NODE_ENV !== "production";

const webpack = require('webpack');
const path = require('path');

// const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: debug ? 'inline-sourcemap' : null,
  entry: path.join(__dirname, 'src', 'app-client.js'),
  devServer: {
    inline: true,
    port: 3333,
    contentBase: "src/static/",
    historyApiFallback: {
      index: '/index-static.html'
    }
  },
  output: {
    path: path.join(__dirname, 'src', 'static', 'js'),
    publicPath: "/js/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
         test: path.join(__dirname, 'src'),
         loader: ['babel-loader'],
         query: {
            cacheDirectory: 'babel_cache',
            presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
         }
      },
      {
         test: /\.scss$/,
         loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
         // loader: ExtractTextPlugin.extract(
         //     'style', // The backup style loader
         //     'css?sourceMap!sass?sourceMap'
         // )
      },
      {
         test: /\.png$/,
         loader: "url-loader?limit=10000&minetype=image/jpg"
      }
    ]
  },
  plugins: debug ? [] : [
   //  new ExtractTextPlugin('styles.css'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),
  ]
};

package.json

{
  "name": "***",
  "version": "1.0.0",
  "description": "***",
  "main": "src/server.js",
  "repository": "**REPO**",
  "scripts": {
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
    "start-dev": "npm run start-dev-hmr",
    "start-dev-single-page": "node_modules/.bin/http-server src/static",
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p"
  },
  "author": "***",
  "license": "UNLICENSED",
  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-2": "^6.22.0",
    "ejs": "^2.5.1",
    "express": "^4.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^5.0.2",
    "react-router": "^2.6.1",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "http-server": "^0.9.0",
    "node-sass": "^4.3.0",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}

Since your image URL starts with a slash, it's absolute, so you need to specify it as '/static/img/spritesheet.png' — Tudor Ilisoi
– Tudor Ilisoi, Commented Jan 21, 2017 at 18:42
Yep, that just causes the compile process to fail as the filepath doesn't exist. Adding ../ removes /static from the filepath — Paulos3000
– Paulos3000, Commented Jan 21, 2017 at 18:47
well, maybe this answer sheds some light? It also discusses image loading stackoverflow.com/questions/33969872/… — Tudor Ilisoi
– Tudor Ilisoi, Commented Jan 21, 2017 at 18:48

strausd · Accepted Answer · 2018-01-15 00:50:04Z

2

I ran into the same problem. I found that you can include ?url=false in your css-loader to disable url handling. Then you can just place an image in your public folder for css to access. The image won't be run through webpack, but it will get you past webpack's compile errors and still allow images to be accessed.

So here is my new object in the module.loaders array:

{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader?url=false', 'sass-loader']
    })
}

answered Jan 15, 2018 at 0:50

strausd

4413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:52:55Z

0

Ok, I found the answer on another stack overflow question: Webpack - background images not loading

It turns out it was a bug, caused by the sourceMap of css-loader.

I changed this...

{
   test: /\.scss$/,
   loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}

...to this:

{
   test: /\.scss$/,
   loaders: [ 'style', 'css', 'sass?sourceMap' ]
}

Hope that helps anyone else who faces this problem as it wasted a good few hours for me!

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jan 21, 2017 at 23:43

Paulos3000

3,54511 gold badges38 silver badges68 bronze badges

Collectives™ on Stack Overflow

Failing to load background-image with sass-loader (Webpack)

UPDATE

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related