如何访问 CSS 中的 Node JS "homepage" 或 PUBLIC_URL 值?

how to access Node JS "homepage" or PUBLIC_URL value in CSS?

我希望这个问题不会重复,但我找不到类似的问题。

我想在我网站的子文件夹下的 IIS 上托管我的 React 应用程序。我在 package.json

中设置了 homepage
{
    "homepage": "/MyApp"
}

我的应用程序工作正常,但是,我的 SCSS 有一个问题:我的 public/fonts 文件夹和 public/images 文件夹是从网站根文件夹获取的,而不是在 MyApp 子文件夹中-文件夹

来自网站根目录

http://myhost.com/fonts/MavenPro-Regular.ttf
http://myhost.com/images/myIcon.png

不是我的预期

http://myhost.com/MyApp/fonts/MavenPro-Regular.ttf
http://myhost.com/MyApp/images/myIcon.png


我正在使用 create-react-app,顶级组件 App.jsx import App.scss

import './App.scss';

App.scss 中,像这样导入 variables.scss

@import "./themes/generated/variables.base.scss";
.my-icon-class {
    background: url('/images/myIcon.png') no-repeat;
    background-size: contain;
}
......

variables.scss 中,我有一个字体变量,它的 src 指向位于 public\fonts
中的 fonts 文件夹 和 CSS class 背景:URL()

@font-face {
  font-family: 'MavenPro-Regular';
  src: url('/fonts/MavenPro-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

有什么我想念的吗?我可以在 SCSS 中使用 PUBLIC_URL 变量吗? 同事告诉我将字体和图像文件夹移动到 src 文件夹,然后将所有 URL 从 URL('/fonts/...') 更改为 URL('fonts/...') 但我认为这可能不是一个好的结构(或者我错了吗?)。我希望找出我的设置有什么问题。谢谢。

我之前对Public文件夹用法的理解是错误的,我应该把字体和图片放到src文件夹里,让它们捆绑到static文件夹里,而不是让它们直接复制进入构建文件夹:
https://create-react-app.dev/docs/using-the-public-folder/

对于 CSS 文件,字体和图像应该引用绝对路径,所以我不应该将源引用到 public 文件夹:
https://github.com/facebook/create-react-app/issues/829

这就是为什么我应该将我的字体和图像文件移动到 src 文件夹中进行捆绑的原因。