0

I'm currently building a project with React, and I'm using CSS modules for individual components.

In my public folder, I have /images/Background.png. In App.module.css, I have the following;

.Container {
  background: url("./images/Background.png");
}

However, this throws the following error;

Can't resolve './images/Background.png' in 'C:\Users\Me\Documents\Projects\Test\app\src\components\styles'

How should I access the contents of the public folder with a CSS Module?

Kerrakuu
  • 19
  • 3

1 Answers1

0

You haven't shared your folder structure, but normally your App.module.css would be in the src while the public is outside of it, so the URL is wrong, try:

.Container {
    background: url("../public/images/Background.png");
}

If the file where you want to use it, not in the route level, you might need to go up a few levels.

When you do the above you will probably get the following error if your application was created with create-react-app:

Module not found: You attempted to import ../public/images/Background.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Here is why

Hope it helps, good luck.

anddak
  • 611
  • 1
  • 6
  • 17