Как я могу использовать загрузчик стилей без другого загрузчика с веб-пакетом?

Question

Я изучаю веб-пакет, но не могу понять, почему мы всегда должны использовать загрузчик стилей с другим загрузчиком.

Я понял, что загрузчики - это модули узлов с экспортированной функцией, которая получает в качестве параметра содержимое файла, на который ссылаются, и возвращает преобразованную строку, чтобы его можно было использовать с другим загрузчиком.

Это мой индекс. js:

import './style.css';

И мой webpack.config. js:

module.exports = {
    entry: './index.js',
    output: {
        filename: 'main.js',
        path: __dirname,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    // 'raw-loader'
                ]
            }
        ]
    }
};

Когда я выполняю npx webpack, я получаю следующую ошибку:

ERROR in ./style.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
|     background-color: gray;
| }
 @ ./style.css 2:26-50
 @ ./index.js

Почему можно style-loader получить содержимое style.css без какого-либо другого загрузчика, такого как raw-loader или css-loader?

Это мой стиль. css:

body {
    background-color: gray;
}

Мне не нужно использовать загрузчик стилей без другого загрузчика, просто я пытаюсь понять, как на самом деле работает style-loader.