Verwenden von Webpack zum Laden von CSS-Dateien von Knotenmodule

Question

Ich versuche, eine react component verwenden, die eine CSS-Datei enthält. Ich benötige die Komponente wie üblich:

Ich würde gerne wissen, wie kann ich benötigen die CSS für die Komponente benötigt.

Ich habe dies bereits versucht:

require('react-select/dist/react-select.css'); 

Und:

require('react-select.css'); 

Und keiner gearbeitet haben.

Answer 1

//package.json 
"dependencies": { 
    "my-package": "2.0.0" 
} 
//app.js 
//Get a relative path to the installed css files: 
require('../someRelativePathFromAppJs/node_modules/my-package/somePath/myNeeded.css') 

Answer 2

Stellen Sie sicher, dass Ihre webpack Konfiguration hat dies:

module: { 
    loaders: [ 
    { test: /\.css$/, loader: "style-loader!css-loader" } 
    ] 
} 

Dies erfordert und bündeln alle CSS-Datei, die Sie benötigen, und ich würde ziehen ihre ganz genau, wie Sie es getan haben:

require('react-select/dist/react-select.css'); 

Eine andere Problemumgehung, die für bestimmte funktioniert, ist, dass Sie diese CSS-Datei kopieren, und in der HTML verknüpfen Sie es durch:

<link rel="stylesheet" href="/path/to/react-select.css">