Using webpack to load CSS files from node modules

Question

I'm trying to use a react component that includes a css file. I'm requiring the component as usual:

var Select = require('react-select');

I'd like to know how can I require the css needed for the component.

I've already tried this:

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

And this:

require('react-select.css');

And none have worked.

Answer 1

Make sure you have the following packages installed:

npm install style-loader css-loader --save-dev

and that your webpack configuration has this:

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

This will require and bundle any css file that you require, and I would pull their exactly how you did it:

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

Another workaround that works for certain is that you copy that css file, and in the html you link it by:

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