1

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

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

{
    "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导入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 指向fonts位于public\fonts
和 CSS 类背景中的文件夹： URL()

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

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

4

1 回答 1

0

我之前对Public文件夹使用的理解是错误的，我应该把字体和图片放到src文件夹中，让它们捆绑到static文件夹中，而不是让它们直接复制到构建文件夹中：
https ://create-react-app.dev/docs/使用公共文件夹/

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

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

于 2020-05-25T23:12:11.790 回答