Блог

Я использую BrowserRouter as Router from react-router-dom . Я хочу разместить свое приложение по пути, который не является / . Я использовал basename атрибут в теге router, и он отлично работает.

 <Router basename={'/my-cool-path'}>
  

Я имею в виду изображения в моих компонентах react, подобные этому:

 <img class="number" src="one.svg"/>
  

Ссылка HTML отлично работает. Но в моих файлах CSS это нарушает:

 background-image: url(one.svg);
  

Я пробовал это, но это прерывается при сборке продукта (работает dev env) :

 background-image: url(/one.svg);
  

Это работает, но только для производственных сборок ( react-scripts build ). Он прерывается во время разработки ( react-scripts start команда).

 background-image: url(/my-cool-path/one.svg);
  

Я хочу иметь URL-пути CSS, которые работают при КАК производственной сборке, так и во время разработки (горячая перезагрузка с помощью react-scripts start команды).

Есть идеи по решению? Возможно ли это?

Короткий ответ: не так, как вы надеетесь.

Проблема в том, что React — это Javascript, а ваш CSS не обрабатывается Javascript.

Вы могли бы спастись, если вы компилируете CSS — например, из SCSS — вы могли бы создать файл ie. env-vars.scss и определить в нем переменную типа $basePath , установив для нее значение /my-cool-path/ . (например $basePath: "/my-cool-path/"; )

Импортируйте этот файл в свой основной файл scss и попросите git (или любой другой репозиторий, который вы используете) игнорировать файл. Затем вы можете вручную воссоздать этот файл на сервере, установив $basePath значение / ( $basePath: "/"; ).

Затем вы можете использовать $basePath в своих URL-адресах в scss, скажем, например background-image: url($basePath "img/some-background.png");

Когда scss будет скомпилирован, он извлечет var из этого файла, и если ваше репозиторий игнорирует его, вы можете создавать разные значения в зависимости от среды, в которой выполняется компиляция.

Однако сборка с помощью react-scripts start и react-scripts build также может предоставить вам способ установить переменную ENV и импортировать ее в ваш scss, но я не совсем знаком с этим, поэтому, боюсь, мне придется направить вас в Google для этого.

Если вы не компилируете свой CSS с помощью препроцессора, это будет более сложной задачей.