Cannot resolve module style-loader!css-loader desp

Question

I'm trying to get css modules in place for my webpack/react development work.

Here is my current JS Code:

import styles from './App.css';

//inside a React render function
const classes=[styles.large,styles.red,styles.bold];
<p className={classes.join(' ')}>Something</p>

When I run the command ./node_modules/.bin/webpack I get the following error:

Module not found: Error: Can't resolve 'style-loader!css-loader' in '/srv/site/public'

I read online to install style-loader and css-loader via npm install style-loader css-loader --save but I already have them installed and they are listed on the devDependencies inside package.json

My versions:

style-loader : ^0.23.1
css-loader : ^2.1.0
react : ^16.6.3
webpack : ^3.12.0
npm : 6.5.0
node: 11.7.0

Here is my css portion of the modules area of webpack.config.js

  {
    test: /\.css$/,
    loader: 'style-loader!css-loader',
    options:{
      modules:true,
      localIdentName:'[path][name]__[local]--[hash:base64:5]',
    },
    exclude: /node_modules/
  }

And here is my resolve portion of the webpack.config.js

resolve:{
    extensions:['.js','.jsx','.css'],
     modules:['node_modules']
 },

I'm not quite sure what to do at this point.

Answer 1

these are two different loaders, you need to run them one after the other, try this:

{
    test: /\.css$/,
    use: [
        {loader: "style-loader"},
        {loader: "css-loader"}
    ],
    options:{
      modules:true,
      localIdentName:'[path][name]__[local]--[hash:base64:5]',
    },
    exclude: /node_modules/
}