wie Sie zum exportieren und importieren Stil in npm-Paket?

Ich habe einen reagieren Komponente und Veröffentliche ich die Komponente in der NPM-registry, die ich bauen mit webpack. In meinem wichtigsten Projekt, an dem ich konsumiert die Komponente npm-Paket JS so:

Import myComp from 'myComp';

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

Und ich konsumieren wollen dem Stil wie diese:

Import 'myComp/index.css';

Oder

Import 'myComp/index';

Und in myComp npm-Paket ich möchte aufzeigen, es in einer Weise, unterstützen diese import-Methode.

HINWEIS: ich will nicht, um es zu importieren direkt aus node_modules

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

Dank!

InformationsquelleAutor David | 2016-11-01
  1. 11

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

    import 'myComp/dist/style.css';

    Und stellen Sie sicher, Ihre Werkzeuge (browserify/webpack etc..) verarbeiten kann, laden von css-in javascript-Datei.

    Also die Frage war mehr bezogen auf den building-Prozess.

    Auch, wenn Sie wollen push-spezifischen code in die npm-registry können Sie über "Dateien" innerhalb package.json. Auf diese Weise werden Sie am Ende nur mit den Dateien, die Sie benötigen npm-registry.

    files: [
"dist/*.css"
]

    Kann man auch mit tools wie:
    https://github.com/rotundasoftware/parcelify - für browserify
    https://www.npmjs.com/package/parcelify-loader - für webpack

    Aber ich wusste nicht, wie Sie. Es zwingt eine Abhängigkeit der Verbraucher von Ihrem npm-Paket.

    • Für webpack, tun npm install --save-dev css-loader. Dann in Ihre webpack.config.js fügen Sie diese Zeile zu der use Optionen: css-loader. Check out github.com/webpack-contrib/css-loader.
    InformationsquelleAutor David
Schreibe einen Kommentar