无法从 React App 中的 css 文件访问我的公共文件夹答案

【问题标题】：Can´t access my public folder from css file in React App无法从 React App 中的 css 文件访问我的公共文件夹
【发布时间】：2021-02-10 21:16:43
【问题描述】：

每次我尝试访问公用文件夹中的文件时都会收到以下错误。

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve '/assets/fonts/PlantinMTProRg.woff' in 'C:\Users\User\Desktop\NewPage\webpage\src'

如您所见，我正在尝试从我的 src 文件夹中的 index.css 中调用一种字体。

我这样称呼它：

@font-face {
  font-family: 'PlantinMTPro';
  src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('truetype');
}

但到目前为止还没有运气。图片也有同样的问题。

有什么想法吗？

提前致谢！

【问题讨论】：

标签： css reactjs node-modules postcss public-folders

【解决方案1】：

在您的 index.html 中，您必须从公共目录链接您的 index.css

<link rel="stylesheet" href="%DIR%/NewPage/webpage/src/index.css">

从那里，您需要找出正确的 url 以访问您的字体系列，您说它在您的 src 文件中。

@font-face {
  font-family: 'PlantinMTPro';
  src: local('plantin_mt_pro'), url(/assets/fonts/PlantinMTProRg.woff) format('woff');
}

另外，我注意到您使用了 truetype 格式。仅当您要导入 .ttf 文件时才使用它。在这种情况下使用format('woff')。

如果您尝试支持多种浏览器，您可能需要在此处添加一些更改

【讨论】：

你好。问题是，公用文件夹不在我当前的目录中。我当前的目录是 src 文件夹，通常当我尝试调用 public 时，我只是去“/”。但这个错误以前从未发生在我身上。
对，但是“index.css”不在公用文件夹中，字体在资产文件夹中。
只需在项目中包含字体并导入即可。这是最好的解决方案
谢谢，但不是我要找的。需要将字体和图像保留在最终版本之外。不过谢谢！
你能不能试着把 format('truetype') 改成 format('woff')