Distribuer CSS avec un composant React

J'ai un composant React index.js qui a un style dans style.css.Distribuer CSS avec un composant React

Je veux distribuer ce composant sur npm, mais je suis confus sur la façon dont je peux le rendre facile pour les autres développeurs d'utiliser le style.

Il y a trois options que je l'ai vu:

Utilisez require('./style.css') et les utilisateurs comptent sur une solution ayant de ventes liées (par exemple webpack, rollup). Je n'aime pas cette solution car elle oblige les utilisateurs à utiliser une certaine route pour utiliser mon composant.
Permet à l'utilisateur d'importer le style avec <link rel="stylesheet" href="node_modules/package/style.css" />. Je n'aime pas cette solution car cela signifie que mes utilisateurs devront apporter des modifications à leur HTML plutôt que d'inclure le composant React où ils le veulent.
Placez le CSS dans le composant lui-même avec un plug-in tel que react-jss. Ce n'est pas une solution viable pour moi car j'ai un grand nombre de fichiers SCSS qui composent le style de mon composant.

Aucune de ces solutions ne répond à mes besoins et rend très difficile l'utilisation de mon composant. Comment puis-je distribuer le composant afin qu'il soit facile pour les utilisateurs de l'utiliser?

Source

2017-02-16 James Monger

Laissez les utilisateurs choisir comment inclure le fichier dans leur application. Je suggère d'ajouter à votre README.md:

N'oubliez pas d'inclure le fichier CSS!

En utilisant ES6 avec un module Bundler comme Webpack:
import 'package/dist/style.css'; 
Ou, en bon vieux HTML fiable:
<!DOCTYPE HTML> 
<html> 
<head> 
    ... 
    <link href="node_modules/package/dist/style.css" rel="stylesheet" /> 
    ... 
</head> 
... 
</html> 
Vous pouvez également utiliser votre propre style.

C'est l'approche adoptée par la plupart des paquets:

Source

2017-02-16 15:41:54

Je fais la même chose pour [React-Table] (https://github.com/tannerlinsley/react-table). Fonctionne très bien tant que vous faites savoir à votre utilisateur qu'ils doivent l'inclure. – tannerlinsley

Je suggérerais d'inclure le fichier css sur npm, et de documenter ces alternatives.

Ceux qui préfèrent utiliser css css peut dupliquer la feuille de style
Ceux qui préfèrent utiliser les outils de construction peuvent faire l'exigent

Source

2017-02-16 15:42:18 timw4mail

Pour prolonger de la réponse de GG une version avancée serait d'ajouter js version du fichier css.

Parce que ce

import 'package/dist/style.css';

utilisateurs nécessite d'avoir Webpack configuré pour charger le fichier css qui pourrait ne pas être le cas. Par exemple, je le fais rarement parce que j'utilise des outils css-in-js pour mes besoins de style.

Au lieu de cela, si vous enroulez le fichier css dans quelque chose comme ceci:

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 }");

Ensuite, les utilisateurs peuvent simplement faire

import 'package/dist/style';

et il fonctionnera toujours avec un chargeur de modules (Webpack, Browserify, Rollup ...) quelle que soit leur configuration.

Source

2017-02-19 00:57:00 Epeli

Distribuer CSS avec un composant React

Répondre

Questions connexes