Webpack/ES6: wie man Stylesheets importiert

Question

Ich sehe Repositories wie Bootstrap beginnen, zusätzliche Tags in ihre package.json file such as 'style' and 'less.' zu integrieren Wie kann ich diese Tags verwenden, um Assets zu importieren?

package.json 

{ 
    "name": "bootstrap", 
    "style": "dist/css/bootstrap.css", 
    "sass": "scss/bootstrap.scss", 
    "main": "./dist/js/npm" 
} 

Ich verwende ES6-Module und Webpack. Ich möchte in der Lage sein, meine Stylesheets mit dem style-Tag in package.json zu importieren.

Zur Zeit mache ich etwas wie folgt aus:

my_stylesheets.less 

@import "~bootstrap/dist/css/bootstrap"; 

, die für Verbraucher ärgerlich ist es, den Pfad hinzuzufügen, wenn es in package.json zur Verfügung steht. Gibt es eine Möglichkeit, Stylesheets mit dem Tag in package.json zu importieren?

Wenn ich das Tag in package.json nicht verwenden kann, gibt es eine Standardmethode zum Importieren von Stylesheets in ES6-Module?

Answer 1

Ja !!! Webpack behandelt alles als ein Modul, einschließlich dieser niedlichen kleinen package.json in Ihrem Repo.

Daher müssen Sie einfach require() in Ihre App und dann auf Eigenschaften von diesem JSON-Objekt zugreifen. (Siehe json-loader für weitere Informationen).

Ich verwende dies oft, um Daten wie Versionsnummer usw. für meine Webpack-Konfigurationsdatei für Bündelung und Versionierung zu importieren.

Answer 2

Diese Funktion ist vorerst nicht im Webpack enthalten. Dazu gibt es einen open issue im CSS Loader Repo von webpack.

Es gibt auch eine SO thread zur Verwendung des Stilfeldes, und es scheint, dass es einige npm/browserify Werkzeuge gibt, die dies unterstützen.