React-select: Using react-select with webpack instead of browsify

[ohmirocks]

Hi,
i am using webpack for bundling in my application. I tried importing the react-select only the JS is getting bundled and the CSS is not. Is there a example which i can refer how to use this with webpack

Thanks
Om

[maxcnunes]

Hi,

Include the css loader in your webpack, for example:

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

And in your react component you can require the css file from react-select module:

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

[captainill]

thanks, @maxcnunes. This should really be in the docs.

[onedesert]

I'm using webpack and I'm importing the scss filed to be able to reset some select.scss vars

[dylantf]

Can you provide any more details on this? I'm not too familiar with webpack and with the above code, it's telling me it can't find the default.css in /path/to/my/component.js

[FutureKode]

@dyyylan

require('react-select/dist/default.css'); isn't the correct path in the latest few versions. Check the path to the css.

[dylantf]

Ok, I updated the path (currently react-select/dist/react-select.css). Now I am getting this error:
Module not found: Error: Cannot resolve module 'style' in /path/to/component.js

If I look at the page it says something about webpack-style-loader?

[maxcnunes]

@dyyylan You should have installed css-loader and style-loader

npm install css-loader style-loader

But if you are not interested learning how to use webpack then is much easier running it without webpack.

[dylantf]

Ok, thanks for the help.

[seanlindo]

@maxcnunes Google brought me here-- thanks for the clear explanation. Works great!

[Kure69]

Thanks for explaining :)