web-dev-qa-db-fra.com

comment exporter et importer le style dans le paquet npm?

J'ai un composant React et je publie le composant dans le registre NPM que je crée avec Webpack. Dans mon projet principal, j'ai consommé le composant npm package JS comme ça:

Import myComp from 'myComp';

Le problème est que myComp a aussi du CSS, que j'intègre dans dist/index.css avec l'aide de webpack et ExtractTextPlugin (qui construisent tous les css dans un seul fichier).

Et je veux consommer le style comme ceci:

Import 'myComp/index.css';

Ou

Import 'myComp/index';

Et dans le package myComp npm, je souhaite l'exposer de manière à prendre en charge cette méthode d'importation.

REMARQUE: je ne veux pas l'importer directement depuis node_modules

Import '../../../node_modules/myComp/index.css'; // bad

Merci!

cssnode.jsnpmwebpackstyles
17
David

Donc, c'est plus facile que je ne le pensais, tout ce que vous avez à faire est d'importer le CSS comme ça (comme je l'ai fait dans la question):

import 'myComp/dist/style.css';

Et assurez-vous que vos outils (browserify/webpack etc.) peuvent gérer le chargement de CSS dans votre fichier javascript.

Le problème était donc davantage lié au processus de construction.

De plus, si vous voulez pousser du code spécifique dans le registre npm, vous pouvez utiliser des "fichiers" dans package.json. De cette façon, vous vous retrouverez avec uniquement les fichiers dont vous avez besoin dans le registre npm.

files: [
"dist/*.css"
]

Vous pouvez également utiliser des outils tels que: https://github.com/rotundasoftware/parcelify - pour browserify https://www.npmjs.com/package/parcelify-loader - pour webpack

Mais je ne les aimais pas. Cela force une dépendance vis-à-vis du consommateur de votre package npm.

12
David