Error when trying to work with css-loader

Question

While developing with Reactjs, I have problem with css-loader. Basically, this is my webpack.config :

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

And this is how I implement the css :

import styles from './Home.css';
.
.
.
<FormControl type="text" className={styles['input-search']}/>

This is my Home.css

.input-search{
width: 500px;
}

I'm using Hasnode's mern-starter

But there are no css is loaded. What should I do ?

Answer 1

Just change it to this and see if it works:

{
    test: /\.css$/,
    loader: 'style-loader!css-loader'
}

If that works, then add your exclude: /node_modules/ and finally, if that works, then add all your crazy ?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap additions.

Also consider adding a resolve section to your config:

resolve: {
    modules: [
      path.join(__dirname, '../src/components'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx', '.css']
  },