css-loader: problem with background url

Hi,

I’m having a problem when loading a image with url(). I would like to have background: url(../build/images/brew.jpg); but in app.css I have background: url(/images/bg.jpg);

I tried the ‘root’ attribute from the doc but it’s doesn’t work…

What I’m doing wrong ? 😢

base.scss : background: url('../images/bg.jpg');

app.css background: url(/images/bg.jpg);

There is my src folder :

├── src
<span class="pl-k">|</span>   ├── stylesheets
<span class="pl-k">|</span>   <span class="pl-k">|</span>    └──  <span class="pl-smi">base</span>.<span class="pl-smi">.scss</span>
<span class="pl-k">|</span>   ├── images
<span class="pl-k">|</span>   <span class="pl-k">|</span>    └── <span class="pl-smi">bg</span>.<span class="pl-smi">png</span>
<span class="pl-k">|</span>   └── javascripts
<span class="pl-k">|</span>        └── <span class="pl-smi">index</span>.<span class="pl-smi">js</span>
.

There is my build folder :

├── src
<span class="pl-k">|</span>   ├── images
<span class="pl-k">|</span>   <span class="pl-k">|</span>    └── <span class="pl-smi">bg</span>.<span class="pl-smi">png</span>
<span class="pl-k">|</span>    - app.js
<span class="pl-k">|</span>    - app.css

my webpack config

const autoprefixer = require('autoprefixer')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

 const sassLoaders = [
  'css-loader',
  'postcss-loader',
  'sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
]

const config = {
  entry: {
    app: ['./src/index']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader']
      },
      {
        test: /\.scss$/,
     loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=images/[name].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './build/'),
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ],
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],
  resolve: {
    extensions: ['', '.js', '.scss'],
    modulesDirectories: ['src', 'node_modules']
  }
}

module.exports = config

Thanks !

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 19
  • Comments: 28 (2 by maintainers)

Most upvoted comments

Add ?url=false to your css-loader, that will disable url handling :

e.g: ['css-loader?url=false', 'sass-loader'] ...

If you try to use ~ before your path to the image. Like this: background-url: (~assets/image/myimage). You should config resolve property in your webpack like this:

resolve: {
  alias: {
    'assets': resolve('your/path/to/assets')
  }
}

You can also try using ~ before you path to the image

Notably: background-url: (~assets/image/myimage) should resolve the path

I think one of the following should work:

background: url('src/images/bg.jpg');
background: url('images/bg.jpg');

(this one may need webpack resolve.root set to ‘src’)

I will doublecheck a bit later

I don’t think this should have been closed. There is lots of confusion around the issue still, and no official recommended way to resolve it.

@evilebottnawi @d3viant0ne Is there a recommended solution for this problem given that the thread has many different possible solutions? What is the recommended way of using local images as background image urls?

@egeersoz I agree. @lndj - thanks for the link, it worked for me. For anyone put off by an unfamiliar character set:

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // The magic smoke
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

@volkanunsal downgrade file-loader (1.0.0 is still beta)

@Harti resolve is a first-level key on the webpack.config object.

wepack.config = {
  resolve: {
    ...
  }
}

Same problem here. Tried to use background: url(/background.png) and @font-face: src(/something.woff) with css-loader and file-loader. Only browser that works with this is IE11. I eventually switched to using url-loader for these files. I only tried serving this with webpack-dev-server

@kumarharsh have you set publicPath in webpack config? I’ve used leading slash when setting publicPath and it works ok

Same issue here. Tried for hours to tweak config settings, and nothing worked. This seems to be happening quite a bit with this loader. The system should be more forgiving.