从 CSS 模块访问公用文件夹

Question

我目前正在使用 React 构建一个项目，并且我正在为单个组件使用 CSS 模块。

在我的公共文件夹中，我有/images/Background.png。 在 App.module.css 中，我有以下内容；

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

但是，这会引发以下错误；

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

我应该如何使用 CSS 模块访问公用文件夹的内容？

Answer 1

您尚未共享您的文件夹结构，但通常您的App.module.css 会在src 中，而public 在它之外，因此 URL 错误，请尝试：

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

如果你想使用它的文件，而不是在路由级别，你可能需要上几级。

当您执行上述操作时，如果您的应用程序是使用create-react-app 创建的，您可能会收到以下错误：

未找到模块：您尝试导入 ../public/images/Background.png 不在项目范围内 src/ 目录。不支持 src/ 之外的相对导入。

Here is why

希望对你有帮助，祝你好运。