'Using webpack to load CSS files from node modules

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.

cssreactjswebpack


Solution 1:[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')

Solution 2:[2]

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">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Machavity
Solution 2 Legends

Related Questions