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.
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">
npm install style-loader css-loader --save-dev and also if you decide to split the CSS into it's own file as per the documentation be sure to remove the explicit css marker in the require as is mentioned here
//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')
