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

Question

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

我想在我网站的子文件夹下的 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/...') 但我认为这可能不是一个好的结构（或者我错了吗？）。我希望找出我的设置有什么问题。谢谢。

Answer 1

我之前对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 文件夹中进行捆绑的原因。

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

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

css

sass

reactjs

create-react-app

website-homepage

来自网站根目录

不是我的预期