Как включить CSS в конфигурацию веб-пакета для приложения React?

Question

Я следовал учебному пособию, потому что я никогда не пробовал веб-пакет и хотел понять основы его работы и способы создания небольшого приложения React без классического create-реакции-приложения Все работало нормальнопока я не начну добавлять стили, и приложение не будет аварийно завершать работу, выдавая эту ошибку:

ОШИБКА в ./source/styles/index.css 2: 0 Не удалось выполнить синтаксический анализ модуля: неожиданный токен (2: 0)соответствующий загрузчик для обработки этого типа файлов, в настоящее время нет загрузчиков, настроенных для обработки этого файла.

Вот как у меня есть файл webpack.config:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
require('dotenv').config()


module.exports = {

    entry: './source/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        port: process.env.DEVPORT
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './source/index.html'
        })
    ]

}

Итак, я добавил это в массив правил:

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

Все та же ошибка. (Я установил зависимость)

Я проверил импорт CSS, и все в порядке. Как я мог решить это? Я ищу, и, похоже, в веб-пакете так много решений и так много плагинов для css, но я не уверен, какой из них использовать, и может ли он работать с моей конфигурацией.