Как распространять CSS через NPM

Question

Я пытаюсь разбить мое монолитное приложение React на части многократного использования, которые можно использовать совместно с другими проектами.

Я хочу извлечь некоторые общие компоненты (например, Button, Header, Dropdown и т. Д.) Вмоя собственная маленькая библиотека пользовательского интерфейса.Проблема, с которой я сталкиваюсь, заключается в том, как управлять CSS.Прямо сейчас у моего приложения есть только одна таблица стилей, которая обо всем позаботится.

Вот решения, которые я видел:

1. Встраивание стилей CSS для каждого компонента в JS длясам компонент (CSS в JS).
2. import или require CSS-файлы в JS для компонента и использование веб-пакета для комплектации CSS-файла.

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

И я не могу заставить себя import файл CSS.Это просто так неправильно.Мы даже больше не пишем javascript.

Я понимаю, что это не совсем популярные мнения, но есть ли третий вариант, который мне не хватает для получения старого доброго CSS-файла изМодуль NPM, который я могу просто вставить в свой HTML и использовать?В идеале тот, который не включает в себя копирование / вставку из node_modules.:)

Answer 1

Благодаря подсказке @EmileBergeron я нашел плагин импорта PostCSS .Он может найти и встроить таблицы стилей в node_modules и в ваш собственный код.

Итак, мой рабочий процесс будет:

1. npm install my-ui-library
2. Импортируйте компоненты React, которые выхотите использовать в свои файлы JS import { Button } from 'my-ui-library'
3. Импорт соответствующих таблиц стилей в свои файлы CSS @import 'my-ui-library/Button.css'

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

Затем мне просто нужно добавить PostCSS в мою систему сборки.вставить все, что было довольно просто в тестировании.