wie man Stil in Npm-Paket exportiert und importiert?

Question

Ich habe eine Reaktionskomponente und ich veröffentliche die Komponente in der NPM-Registrierung, die ich mit Webpack baue. In meinem Hauptprojekt verbraucht ich die Komponente npm Paket JS wie folgt aus:

Import myComp from 'myComp'; 

Das Problem ist, dass myComp auch CSS haben, dass ich in dist/index.css mit Hilfe von webpack bauen und ExtractTextPlugin (die in eine ganze CSS bauen Datei).

Und ich mag den Stil wie diese konsumieren:

Import 'myComp/index.css'; 

Oder

Import 'myComp/index'; 

Und in myComp npm Paket will ich es in einer Art und Weise machen, die diese Importmethode unterstützen.

HINWEIS: Ich möchte nicht aus node_modules

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

Dank direkt importieren!

Answer 1

So ist es einfacher, als ich dachte, alles, was Sie tun müssen, ist die CSS so importieren (wie ich in der Frage tat):

import 'myComp/dist/style.css'; 

Und stellen Sie sicher, dass Ihre Werkzeuge (browserify/webpack usw. .) kann mit CSS in Ihrer Javascript-Datei umgehen.

Also war das Problem mehr auf den Bauprozess bezogen.

Wenn Sie bestimmten Code in die npm-Registrierung einfügen möchten, können Sie auch "Dateien" in package.json verwenden. Auf diese Weise erhalten Sie nur die Dateien, die Sie in der npm-Registrierung benötigen.

files: [ 
"dist/*.css" 
] 

Sie können auch Tools wie verwenden: https://github.com/rotundasoftware/parcelify - für browserify https://www.npmjs.com/package/parcelify-loader - für webpack

aber ich mochte sie nicht. Es erzwingt eine Abhängigkeit vom Konsumenten Ihres npm-Pakets.