как получить доступ к "домашней странице" узла 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
папка для комплектации.