Загрузка другого CSS в зависимости от развертывания - PullRequest
0 голосов
/ 26 марта 2019

В настоящее время у нас есть общий бэкэнд и внешний интерфейс для двух проектов.Проект B, по сути, является лишь подмножеством проекта A. Он имеет все те же функции, за исключением некоторых, которые мы ограничиваем.

Используя модуль dotenv в узле, я могу ограничить загрузку определенных маршрутов, поэтому бэкэндвсе обрабатываются с переменными среды.Однако внешний интерфейс имеет другую основную цветовую схему (синий вместо фиолетового), и логотип также отличается.

Как бы я загрузил эти два различия в зависимости от среды / развертывания?Я попытался поместить все общие CSS в один файл и оттуда импортировать их. Я думаю, что основное отличие во внешнем интерфейсе состоит в том, что projA - это другая тема, чем projB.Некоторые из компонентов, которые я могу скрыть / показать с помощью условной функции рендеринга реагирует.

main.scss:

@import _projA.scss
@import _projB.scss

Затем в своем конфиге веб-пакета я передаю переменную окружения через скрипт сборки npm и исключаю _projA или projB.scss.Это все еще загружает оба, и я предполагаю его, потому что основной файл scss импортирует оба.

РЕДАКТИРОВАТЬ: https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

1 Ответ

1 голос
/ 26 марта 2019

Пользовательские переменные среды

Примечание: эта функция доступна по адресу response-scripts@0.2.3 и выше.

Эти переменные среды будут определены для вас в файле process.env, и в зависимости от вашей среды (запуск npm, сборка npm, тест npm) они будут отображаться по мере необходимости.

Требуется только один импорт, а остальное будет обрабатывать React, создайте вашу среду. файлы и используйте его так:

@import REACT_APP_STYLE

Пример пользовательской переменной среды в файле .env.development.local для npm start:

REACT_APP_STYLES = _projA.scss

Дополнительная информация о пользовательских переменных среды.

...