react-boilerplate: Background image not displayed in CSS Modules

I was experimenting with the CSS modules provided by this boilerplate (great work by the way), but I could not make background image work properly:

When the whole app is reloaded, styles such as background: url('my-background.jpg'); will be ignored
If you edit it though, without reloading the whole page, HMR will inject the new style and it will be interpreted correctly

I haven’t found what could cause this strange behavior. I wonder if other CSS directives are affected by this. I’m posting this here because it seems to be linked to this repo config, I have found an example using CSS modules which was properly working.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 21 (13 by maintainers)

Most upvoted comments

K, will work on that later this night.

SimonSelg on Jun 25, 2016

I think this is related to https://github.com/webpack/css-loader/issues/29 and https://github.com/webpack/style-loader/issues/55. As mentioned there “Setting output.publicPath to an absolute URL should fix the issue”. So you should add something like this in dev webpack config (url isn’t correct, I added it just for example)

output = {
  ....
  publicPath: 'http://localhost:3000/dist'
}

infernalmaster on May 24, 2016

Well it looks like this issue is going to solve itself (the fix is getting merged into style-loader soon™): https://github.com/webpack/style-loader/pull/124#issuecomment-249382607

SimonSelg on Oct 1, 2016

@SimonSelg Thanks for your tip, will try it for sure. Good luck for your exams.

berthj193 on Sep 2, 2016

You can add this to your webpack.dev.babel.js:

const ip = require('ip');
.....
output: {
  publicPath: `http://${ip.address()}:3000/build`, // <-- overwrite public path
  ...
},

EDITED. But this will break tunnel (ngrok) functionality 😦

maslianok on Jun 1, 2016