Images in css files only visible after a re-save

[eivindml]

I have some background images defined in my css, like this:

background-image: url('/build/images/logo-mobile.png')

On my first run, images defined in css is not shown, and I get console.log errors for them, like " 404 http://localhost:8080/build/images/logo-desktop.png".

The run script is (hot reloading):

cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

But if I go into the css file that defines the image background url, and just change whatever, and save it, then everything is picked up by laravel mix, and all url's are correct. If I restart webpack-dev-server, then the image asset url's are not working again.

My full webpack.mix.js:

const mix = require('laravel-mix')
const autoprefixer = require('autoprefixer')

const autoprefixOptions = {}

const options = {
  postCss: [
    autoprefixer(autoprefixOptions)
  ]
}

const browserSync = {
  notify: false,
  files: [
    'templates/**/*'
  ]
}

mix
  .setPublicPath('web/build')
  .copy('assets/static/fonts/', 'web/build/fonts/')
  .copy('assets/static/images/', 'web/build/images/')
  .copy('assets/static/favico/', 'web/build/favico/')
  .js('assets/js/app.js', 'web/build/app.js')
  .sass('assets/sass/main.sass', 'web/build/app.css')
  .sourceMaps()
  .options(options)
  .browserSync(browserSync)

Any ideas what's going on?