Почему не работает MiniCssExtractPlugin в сборке webpack?

Собираю Webpack проект, наткнулся на ошибку с css. Вот код в webpack.config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "webcomp-boilerplate.js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },

  devServer: {
    static: "./public",
    port: 8998,
    hot: true,
  },

  plugins: [
    new MiniCssExtractPlugin(),
  ],
  devtool: "inline-source-map",
};

файл index.js:

import './index.css';


const root = document.querySelector(".root");

const btnCreate = Button("btn-create");
btnCreate.innerText = "Создать";

package.json:

{
  "name": "y",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.26.7",
    "@babel/preset-env": "^7.26.7",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "mini-css-extract-plugin": "^2.9.2",
    "style-loader": "^4.0.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  },
  "version": "1.0.0",
  "description": "<!--\r SPDX-FileCopyrightText: NOI Techpark <[email protected]>",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/noi-techpark/webcomp-boilerplate.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/noi-techpark/webcomp-boilerplate/issues"
  },
  "homepage": "https://github.com/noi-techpark/webcomp-boilerplate#readme",
  "dependencies": {
    "accepts": "^1.3.8",
    "acorn": "^8.7.1",
    "acorn-import-assertions": "^1.8.0",
    "ajv": "^6.12.6",
    "ajv-formats": "^2.1.1",
    "ajv-keywords": "^3.5.2",
    "ansi-html-community": "^0.0.8",
    "anymatch": "^3.1.2",
    "array-flatten": "^2.1.2",
    "babel-plugin-polyfill-corejs2": "^0.4.12",
    "babel-plugin-polyfill-corejs3": "^0.10.6",
    "babel-plugin-polyfill-regenerator": "^0.6.3",
    "balanced-match": "^1.0.2",
    "batch": "^0.6.1",
    "binary-extensions": "^2.2.0",
    "body-parser": "^1.20.0",
    "bonjour-service": "^1.0.13",
    "brace-expansion": "^1.1.11",
    "braces": "^3.0.2",
    "browserslist": "^4.24.4",
    "buffer-from": "^1.1.2",
    "bytes": "^3.0.0",
    "call-bind": "^1.0.2",
    "caniuse-lite": "^1.0.30001697",
    "chokidar": "^3.5.3",
    "chrome-trace-event": "^1.0.3",
    "clone-deep": "^4.0.1",
    "colorette": "^2.0.19",
    "commander": "^2.20.3",
    "common-path-prefix": "^3.0.0",
    "compressible": "^2.0.18",
    "compression": "^1.7.4",
    "concat-map": "^0.0.1",
    "connect-history-api-fallback": "^2.0.0",
    "content-disposition": "^0.5.4",
    "content-type": "^1.0.4",
    "convert-source-map": "^2.0.0",
    "cookie": "^0.5.0",
    "cookie-signature": "^1.0.6",
    "core-js-compat": "^3.40.0",
    "core-util-is": "^1.0.3",
    "cross-spawn": "^7.0.3",
    "cssesc": "^3.0.0",
    "debug": "^2.6.9",
    "default-gateway": "^6.0.3",
    "define-lazy-prop": "^2.0.0",
    "depd": "^2.0.0",
    "destroy": "^1.2.0",
    "detect-node": "^2.1.0",
    "dns-equal": "^1.0.0",
    "dns-packet": "^5.4.0",
    "ee-first": "^1.1.1",
    "electron-to-chromium": "^1.5.91",
    "encodeurl": "^1.0.2",
    "enhanced-resolve": "^5.10.0",
    "envinfo": "^7.8.1",
    "es-module-lexer": "^0.9.3",
    "escalade": "^3.2.0",
    "escape-html": "^1.0.3",
    "eslint-scope": "^5.1.1",
    "esrecurse": "^4.3.0",
    "estraverse": "^4.3.0",
    "esutils": "^2.0.3",
    "etag": "^1.8.1",
    "eventemitter3": "^4.0.7",
    "events": "^3.3.0",
    "execa": "^5.1.1",
    "express": "^4.18.1",
    "fast-deep-equal": "^3.1.3",
    "fast-json-stable-stringify": "^2.1.0",
    "fast-uri": "^3.0.6",
    "fastest-levenshtein": "^1.0.12",
    "faye-websocket": "^0.11.4",
    "fill-range": "^7.0.1",
    "finalhandler": "^1.2.0",
    "find-cache-dir": "^4.0.0",
    "find-up": "^4.1.0",
    "follow-redirects": "^1.15.1",
    "forwarded": "^0.2.0",
    "fresh": "^0.5.2",
    "fs-monkey": "^1.0.3",
    "fs.realpath": "^1.0.0",
    "function-bind": "^1.1.1",
    "gensync": "^1.0.0-beta.2",
    "get-intrinsic": "^1.1.2",
    "watchpack": "^2.4.0",
    "wbuf": "^1.7.3",
    "webpack-dev-middleware": "^5.3.3",
    "webpack-merge": "^5.8.0",
    "webpack-sources": "^3.2.3",
    "websocket-driver": "^0.7.4",
    "websocket-extensions": "^0.1.4",
    "which": "^2.0.2",
    "wildcard": "^2.0.0",
    "wrappy": "^1.0.2",
    "ws": "^8.8.0",
    "yallist": "^3.1.1",
    "yocto-queue": "^1.1.1"
  }
}

Ошибка, которая выводиться:

ERROR in ./src/index.css 1:0

Module parse failed: Unexpected token (1:0) 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 .btn-save{ | color: red; | }