Невозможно использовать загрузчик css с помощью оператора импорта модуля ES 6

Question

index.js:

import foo from "./foo.js"; // works fine
import blah from "./blah.js"; // works fine

import css from "style-loader!css-loader!../content/site.css"; // fails with exception

Я использую Webpack 4.20.x.Когда я использую оператор импорта модуля ES6 для импорта и связывания файла CSS, я получаю исключение в консоли (см. Ниже), и мой CSS не загружается на страницу.

Исключение:

Не удалось разрешить спецификатор модуля "style-loader! Css-loader! ../ content / site.css".Относительные ссылки должны начинаться с "/", "./" или "../".

У меня загрузчики инсталлированы как зависимости dev.

Выдержка изpackage.json:

"devDependencies": {
    "css-loader": "^1.0.0",
    "lite-server": "^2.4.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  }

1. Я знаю, что могу настроить загрузчики в моем webpack.config.json, но я хочу, просто для практики, настроить их встроенными.

2. Я знаю, что мог бы использовать синтаксис CommonJS style webpack- require() также для встроенного импорта вместо стиля модуля ES 6 import, но сначала я хочу выполнить импорт.

Я в основном пробую каждый синтаксис один за другим.

РЕДАКТИРОВАТЬ

В ответ на комментатор @axm__, я просил webpack связать мои файлы.Вот как выглядел мой webpack.config.js в то время.В то время я не использовал загрузчики на основе конфигурации.

const path = require("path");

// How to use source maps, css, sass
module.exports = {
    mode: "production",
    entry: {
        index: path.resolve(__dirname, "scripts/index.js"),
        contact: path.resolve(__dirname, "scripts/contact.js"),
        about: path.resolve(__dirname, "scripts/about.js")
    }, 
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist")
    },
    /* module: {
        rules: [
            { 
                test: /\.css/, 
                use: [
                    { loader: "style-loader" },
                    { 
                        loader: "css-loader", 
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    } */
};