React-starter-kit: Error: Cannot find module 'logo.png'

[moshest]

I have a component Logo with Logo.css and logo.png files.

When I use the image on the css file like:

.root {
  background: url('logo.png') no-repeat 0 0;
}

I got the following error: Error: Cannot find module 'logo.png'

If I change the path to url('/logo.png') and put the logo image on the public folder, everything works fine but that's breaks the component-based UI development principle.

[langpavel]

Try ./logo.png

[moshest]

Same results. Please see guidelines on css-loader library.

I tries to import the image file from the Logo.js component class and it's works:

import image from './logo.png';

assert.equal(image, '/assets/../logo.png?xxxx');

I can't figure out why it's failed on the CSS file.

[frenzzy]

https://github.com/webpack-contrib/css-loader#url

/* src/components/Header/Header.css */
.root {
  background-image: url('./banner.png'); /* src/components/Header/banner.png */
}

[moshest]

url('./logo.png'), url('logo.png'), url(./logo.png)and url(logo.png) give me the same error.

[ucay]

is this related with webpack's issue?
https://github.com/webpack-contrib/css-loader/issues/74

[moshest]

Yes. Looks like it's the same issue.

Disabling the modules: true on css-loader options break all the images on the website but the warning gone.

[moshest]

I open a new project of "react-start-kit" and change the file Header.css to:

.bannerTitle {
  background: url('logo-small.png');
  /*...*/
}

And the build was failed with error: Cannot find module 'logo-small.png'.

When I change it to:

.bannerTitle {
  background: url('./logo-small.png');
  /*...*/
}

Everything works fine.

That's incompatible with the guidelines of css-loader library and can case problems when requiring third-party style files.

[frenzzy]

For third-party libraries you may to disable CSS Modules, then url('logo-small.png') also will work fine.

[moshest]

Confirm. Working.

Thanks!