как получить доступ к "домашней странице" узла JS или значению PUBLIC_URL в CSS?

Надеюсь, этот вопрос не дублируется, но я не нашел похожего вопроса.

Я хочу разместить свое приложение React на IIS в подпапке моего веб-сайта. Я установил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/...')но я думаю, что это может быть не очень хорошая структура (или я ошибаюсь?). Я надеюсь узнать, что не так в моих настройках. Спасибо.

1 ответ

Решение

Мое предыдущее понимание использования общих папок неверно, я должен помещать шрифты и изображения в src папку, пусть они в комплекте staticпапку, вместо того, чтобы позволить им напрямую копировать в папку сборки:
https://create-react-app.dev/docs/using-the-public-folder/

Для файла CSS шрифты и изображение должны ссылаться на абсолютный путь, поэтому я не должен ссылаться на источник в общей папке:
https://github.com/facebook/create-react-app/issues/829

Вот почему я должен переместить файлы шрифтов и изображений в src папка для комплектации.

Другие вопросы по тегам