Распространение CSS с компонентом React

У меня есть компонент React index.js, который имеет стиль в style.css.Распространение CSS с компонентом React

Я хочу распространять этот компонент на npm, но я смущен тем, как я могу облегчить использование другими разработчиками стиля.

Есть три варианта, которые я видел:

Использование require('./style.css') и полагаться на пользователях, имеющих пакетирование решения (например webpack, rollup). Мне не нравится это решение, поскольку оно заставляет пользователей использовать определенный маршрут для использования моего компонента.
Сделайте импортировать стиль пользователя с помощью <link rel="stylesheet" href="node_modules/package/style.css" />. Мне не нравится это решение, так как это означает, что мои пользователи должны будут внести изменения в свой HTML, а не просто включать компонент React, где они этого хотят.
Поместите CSS в компонент с помощью плагина, такого как react-jss. Это не жизнеспособное решение для меня, так как у меня есть большое количество файлов SCSS, составляющих стиль для моего компонента.

Ни одно из этих решений не отвечает моим потребностям и затрудняет использование моего компонента. Как я могу распределить компонент так, чтобы людям было легко его использовать?

источник

2017-02-16 James Monger

Позвольте пользователям выбрать, как включить файл в свое приложение. Я бы предложил добавить к вашему README.md:

Не забудьте указать файл CSS!

Использование ES6 с модулем Bundler как Webpack:
import 'package/dist/style.css'; 
Или, в простой старый надежный HTML:
<!DOCTYPE HTML> 
<html> 
<head> 
    ... 
    <link href="node_modules/package/dist/style.css" rel="stylesheet" /> 
    ... 
</head> 
... 
</html> 
Вы также можете использовать свой собственный стиль.

Это подход используется в большинстве пакетов:

источник

2017-02-16 15:41:54

Я делаю то же самое для [React-Table] (https://github.com/tannerlinsley/react-table). Работает очень хорошо, пока вы позволяете своему пользователю знать, что нужно включить его. – tannerlinsley

Я бы предложил включить файл css в npm и документировать эти альтернативы.

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

источник

2017-02-16 15:42:18 timw4mail

Продлить от ответа GG в продвинутая версия будет добавить js-версия файла css.

Поскольку это

import 'package/dist/style.css';

требует, чтобы пользователи были Webpack сконфигурировано для загрузки CSS, который не может быть так. Например, я редко делаю это, потому что я использую инструменты css-in-js для моих потребностей в стиле.

Вместо если вы заключаете файл CSS во что-то вроде этого:

package/dist/style.js

var insertCss = require('insert-css'); // https://github.com/substack/insert-css 
// inline the whole style.css here 
insertCss(".YourComponent { color: blue }");

Затем пользователи могут просто сделать

import 'package/dist/style';

и он будет работать всегда с любым модулем погрузчика (Webpack, Browserify, Rollup ...), независимо от их конфигурации.

источник

2017-02-19 00:57:00 Epeli

Распространение CSS с компонентом React

ответ

Смежные вопросы