React-redux-starter-kit: Image load not working in scss

[mehdibalouchi]

I am using starter kit recently and I have a problem with loading images in scss file.
I want to use background-image attribute for a div and loader does not load the image file.

I have this code in my scss file:
background-image: url('./assets/Pattern.png');

there is a directory named assets near the scss file containing above line of code.
when bundle restarts I get this error:

ERROR in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/components/AtGlanceSection/AtGlanceSection.scss
Module not found: Error: Cannot resolve module 'assets/Pattern.svg' in /home/mehdi/Git/Hamijoo/src/components/AtGlanceSection
@ ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/components/AtGlanceSection/AtGlanceSection.scss 6:344-373

I've checked a few solutions changing webpack config and got nothing.
what should I do?

Thanks for your response.

[BorelTung]

Meet the same problem, any solutions?

[mehdibalouchi]

It has been 6 days now. any solution????

[nmrony]

@BorelTung @mehdibalouchi create a directory called assets in components directory put your image files in there. Do not use relative image path from root (as per css-loader instruction) rather use relative image path from the scss file. Thus I resolve this for now. I think we should have this in README if this is the way to go. what do you think? @davezuko

[mehdibalouchi]

@nmrony I already have an assets directory near my scss file and I am using relative path from my stylesheet. But no matter where my image file exists and how relatively I am addressing the file, it doesn't load the image.

[nmrony]

@mehdibalouchi Can you please add some sample code? Please check the snap

[alanrubin]

I'm experience the exactly same issue, it doesn't matter if I put the image on the same directory of the scss/css file or not. I always use absolute paths. It finds the asset (otherwise the error message would be different) but says it cannot resolve the module for the image - it seems to me css modules are unable to find the url/file loader for the image to understand how to process it. Any ideas ?

This is a bit of annoying, my work around was to use React styles object to declare the image background so that I can import them in JS and not in CSS.

Here is the error message:

ERROR in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/containers/AppContainer.css Module not found: Error: Cannot resolve module 'my-image.png' in /Users/alanrubin/projects/kiosk/src/containers @ ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./src/containers/AppContainer.css 6:81-113

[BorelTung]

I've fix this issue in my project. Maybe this would help. See postcss-loader issue#83 .

[nmrony]

@BorelTung That's nice workaround

[fingermark]

I have my image in ./src/static and am trying to access it with background: url('/image.png'); webpack is able to find it -- and I can access it on http://localhost:3000/image.png -- but it doesn't seem to load in Chrome. Chrome doesn't show a network request for that image. And there is no link set up for it in the CSS inspector.

This is related to https://github.com/webpack/css-loader/issues/29. I disabled sourceMaps for now

[drock512]

This is what worked for me. Update the url in the scss file to be relative to the 'src' directory. For example:

// src/components/MySweetComponent/MySweetComponent.scss
background-image: url('./components/MySweetComponent/assets/bg.png');

[Blackening999]

OMG! That's really sucks :(
I still cannot use url in my file though issue seemed to be closed!

I'm using LESS with pure build like this:

@bg-logo: url('/routes/Home/assets/loggo.png');

and it cannot load it. I also tried to use public folder which seems to be completely useless in that matter too.

Please help!