Не удается разрешить модуль style-loader! Css-loader, несмотря на то, что он уже установлен

Question

Я пытаюсь получить модули CSS для моей webpack/react разработки.

Вот мой текущий код JS:

import styles from './App.css';

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

Когда я запускаю команду ./node_modules/.bin/webpack, я получаю следующую ошибку:

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

Я читаю онлайн, чтобы установить style-loader и css-loader через npm install style-loader css-loader --save, но у меня уже есть их, и они перечислены в devDependencies внутри package.json

Мои версии:

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

Вот мой 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/
  }

А вот моя resolve часть webpack.config.js

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

Я не совсем уверен, что делать в этот момент.

Answer 1

это два разных загрузчика, вам нужно запускать их один за другим, попробуйте это:

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