无法从 React 应用程序中的 css 文件访问我的公共文件夹

Question

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

./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:UsersUserDesktopNewPagewebpagesrc'

正如你所看到的，我正试图从我的src文件夹中的index.css中调用一种字体。

我这样称呼它：

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

但到目前为止运气不佳。图像也有同样的问题。

有什么想法吗？

提前感谢！

Answer 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')。

如果你试图支持多个浏览器，你可能需要在这里添加一些更改