Поделиться CSS между несколькими приложениями SPA (React)

Question

В настоящее время работают над несколькими микро-SPA, которые не знают друг о друге и все они живут в среде Express.Я пытаюсь импортировать глобальный файл CSS, который находится за пределами приложений, но не распознает его.

Использование @import url(assets/global.css) не работает, и я думаю, что это потому, что файл CSS живет вне приложения "экосистема ".

Я не хочу просто добавлять <link rel="stylesheet" href="assets/global.css"/> к каждому index.html, потому что я хочу, чтобы global.css связывался с каждым приложением, уникальным css во встроенных файлах.

Есть ли способ создать и импортировать глобальный файл, который можно использовать в нескольких приложениях?Должен ли я сделать его собственным модулем узла и ссылаться на него таким образом?Кажется, это немного запутанно.

Answer 1

Не безопасно и невозможно ссылаться на файлы, выходящие за рамки проекта.Если вы сделаете console.log(__dirname) где-нибудь внутри одного из ваших микросервисов, вы увидите, что текущий путь начинается в вашей папке src, и вы не можете получить доступ к чему-либо вне этого (если только вы не хотите создать Ajax для своего собственного сервера, и этобыло бы действительно странно).Однако ваш html-файл имеет доступ ко всему внутри вашей общедоступной папки, так как webpack все компилирует и помещает туда.

Я бы использовал инструмент автоматизации задач, такой как Gulp , для создания задачи.которая копирует вашу папку ресурсов в общую папку (или src) каждого микросервиса, а затем ссылается на это местоположение.

Answer 2

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