Можно ли настроить базовое имя React Router для учета URL-адресов активов в CSS?

Question

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

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

Я имею в виду изображения в моих реагирующих компонентах так:

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

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

background-image: url(one.svg);

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

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

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

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

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

Есть идеи для решения?Это возможно?

Answer 1

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

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

Вы можете быть сохранены, если вы компилируете CSS - например, из SCSS - вы можете создать файл, т.е. 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, он извлекает переменную из этого файла, и если ваше хранилище игнорирует его, вы можете создавать различные значения в зависимости от среды, в которой вы запускаете компиляцию.

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

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