React-select: Component CSS is Not loaded

[VictorSage]

Installed version v0.9.1, I can use the component, but seems no CSS is loaded.

[pranav]

+1

[milesegan]

I'm seeing this as well. Also in 1.0.0-beta.

[pranav]

I ended up importing the css in my main.scss file to get it to work fyi

@import url('../../node_modules/react-select/dist/react-select.css');

[milesegan]

Thanks @pranav. That's a good workaround.

[Heboy]

I import default.scss in /node_modules/react-select/lib/Select.js

require('../scss/default.scss');

it works too

[thirdknife]

for me it's still not working even after adding

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

[VictorSage]

this is my work around: create a package.json file and include the following:

{
  "style": "style.scss"
}

add the following line in style.scss

@import "react-select/scss/default";

[vzaidman]

+1

[brwinkle]

+1

[brwinkle]

This still seems to be present in the newest beta. I'm using browserify and trying to require the CSS file, but the transforms that allow me to do so that I've tried (partialify and browserify-css) don't seem to play well with babelify. This seems to be a long-standing issue and I'm wondering if there's a fix on the way.

[jonaskello]

+1

[bradparks]

+1

for the time being, i went super simple, and copied the dist/react-select.css file into my project, and it works great.

[cema-sp]

import 'react-select/dist/react-select.css'; helped in my case (npm + webpack)

[rcoh]

I needed import 'css!react-select/dist/react-select.css as well as the webpack css module

[StevenLangbroek]

FYI, if you're using css-loader with ?modules enabled, you can override its default behavior like so:

:global {
  @import "~react-select/scss/select";
}

[dianjin]

Used @cema-sp's workaround, thank you! Wish there was a more elegant way to import the css though.

[jxm262]

@cema-sp Thanks a ton :+1: Took me a long time to finally stumble on this ticket. Your're suggestion is working for me on webpack

[huvber]

I tried to add import Select from 'css!react-select/dist/react-select.css'; in the main js and in the files where I used this component but doesn't style it

[mrconnormurphy]

+1

@huvber I directly linked the CSS via my index.html file

<link rel="stylesheet" type="text/css" href="node_modules/react-select/dist/react-select.css">
This seemed to fix the CSS issue. If you still get functionality issues check out #618

[cema-sp]

@huvber you should not import anything from css, just css itself (remove Select from from your import expression).

[anton6]

+1

imported css manually like most suggest here to solve the problem temporaly

[gojohnnygo]

This helped me. https://github.com/JedWatson/react-select/wiki#for-webpack

[craigcartmell]

@StevenLangbroek I had no idea you could do this. Such a life saver.

[SVITY]

@VictorSage
It is problem because of you use css-modules. Easy way to fix it to use several loaders. The first is for local styles, the second is for node_modules.

{
 test: /\.css$/,
 include: /node_modules/,
 loader: 'style!css!postcss',

},
{
 test: /\.css$/,
 exclude: /node_modules/,
 loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss',
},

[ArunRamachandran]

@SVITY Finally this helped me ! Thanks .

[SVITY]

@ArunRamachandran You are welcome!

[dimagimburg]

@SVITY thank you very much! In my environment it worked without postcss (which I don't really know what is it in honestly)

     {
          test: /\.css$/,
         include: /node_modules/,
         loader: 'style!css'
     },
    {
        test: /\.css$/,
        exclude: /node_modules/,
        loaders: [
            'style?sourceMap',
            'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
    }

and also this import on my component import 'react-select/dist/react-select.css';

[Startouf]

Hey @dimagimburg and @SVITY I'm quite new to React and it's not really clear where I should put this code... Does this go somewhere in the webpack config ? Do I need NPM any dependency for this to work ?

[dimagimburg]

@Startouf It depends what dependencies would you like, I used CSS Modules for my css rendering into the component. The piece of code I pasted here is from my webpack.config.js

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples