[SOLVED] Webpack style-loader not injecting styles into DOM

I've got a styles.css file I'm trying to bundle with Webpack. I've got the css-loader and style-loader packages installed and listed in package.json. I've got the CSS file in an import statement in the .js file I've got set as Webpack's entry point. Looking at the .js file Webpack outputs, the CSS file is loaded, but no styles are loaded in the DOM's script tag.

webpack.config



const path = require('path');
module.exports = {
  mode: "development",
    entry: "./src/index.js",
    output:{
        filename: 'app.js',
        path: path.resolve(__dirname, 'DIST')
    },
 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

index.js

import * as game from './game.js';
import * as display from './display.js';
import * as AI from './AI.js';
import './styles.css';



/**
 * AI Handles the listener governing AI movements and listens for the 'playerSwitch'
 * event.
 * 
 */
AI.initializeAI();

package.json

{
  "name": "tic-tac-toe",
  "version": "1.0.0",
  "description": "tic tac toe game",
  "main": "index.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Seth",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "file-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.48.0",
    "webpack-cli": "^4.7.2"
  }
}

Here's the entry in the dev version of index.js.

/***/ "./node_modules/css-loader/dist/cjs.js!./src/styles.css":
/*!**************************************************************!*\
  !*** ./node_modules/css-loader/dist/cjs.js!./src/styles.css ***!
  \**************************************************************/
/***/ ((module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! assets/quicksand bold.otf */ \"./src/assets/quicksand bold.otf\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_1___default()(___CSS_LOADER_URL_IMPORT_0___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"\\r\\n\\r\\n@font-face {\\r\\n    font-family: Quicksand;\\r\\n    src: url(\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \") format(\\\"opentype\\\");\\r\\n}\\r\\n* {\\r\\n    background-color: rgb(50, 51, 58);\\r\\n    font-family: \\\"Quicksand\\\", opentype;\\r\\n    color: rgb(201, 199, 199);\\r\\n}\\r\\nbody,\\r\\nhtml {\\r\\n    height: 100%;\\r\\n    width: 100%;\\r\\n}\\r\\n.header {\\r\\n    text-align: center;\\r\\n}\\r\\n.mainContent {\\r\\n    display: flex;\\r\\n    flex-direction: column;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    height: 100%;\\r\\n}\\r\\n.scoreBoard {\\r\\n    display: flex;\\r\\n    justify-content: space-between;\\r\\n    align-items: center;\\r\\n    height: 30%;\\r\\n    width: 40%;\\r\\n    flex-direction: row;\\r\\n\\r\\n    flex-wrap: wrap;\\r\\n    user-select: none;\\r\\n    -webkit-user-drag: none;\\r\\n}\\r\\nhr {\\r\\n    margin-top: 0;\\r\\n    margin-bottom: 0;\\r\\n}\\r\\n.playerBox > * {\\r\\n    background-color: transparent;\\r\\n}\\r\\n.playerBox > h1 {\\r\\n    background-color: transparent;\\r\\n    font-size: 3.5vh;\\r\\n    padding-right: 10px;\\r\\n}\\r\\n.playerBoxContainer {\\r\\n    display: flex;\\r\\n    flex-direction: column;\\r\\n    max-width: 30%;\\r\\n}\\r\\n.playerBox {\\r\\n    background-color: rgb(117, 120, 134);\\r\\n    -webkit-box-shadow: 3px 2px 24px 1px rgba(91, 91, 91, 0.48);\\r\\n    box-shadow: 3px 2px 24px 1px rgba(91, 91, 91, 0.48);\\r\\n    border-radius: 12px;\\r\\n    display: flex;\\r\\n    flex-direction: row;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    width: 100%;\\r\\n    height: 100%;\\r\\n    margin-top: 15%;\\r\\n    z-index: 2;\\r\\n}\\r\\n.playerBox img {\\r\\n    padding-left: 4px;\\r\\n}\\r\\n.activePlayerBox {\\r\\n    background-color: rgba(75, 165, 204, 0.822);\\r\\n}\\r\\n.dropdown {\\r\\n    width: 100%;\\r\\n    position: relative;\\r\\n    top: -9px;\\r\\n    background-color: rgb(117, 120, 134);\\r\\n    border-bottom-left-radius: 12px;\\r\\n    border-bottom-right-radius: 12px;\\r\\n    display: flex;\\r\\n    transition: height 0.2s ease-in;\\r\\n    height: 50px;\\r\\n    z-index: 1;\\r\\n}\\r\\n\\r\\n.dropdownIcon {\\r\\n    background: transparent;\\r\\n    padding: 10px;\\r\\n    margin: 5px;\\r\\n    height: 20px;\\r\\n    width: 20%;\\r\\n    height: 60%;\\r\\n    transition: height 0.2s ease-in;\\r\\n}\\r\\n.collapsed {\\r\\n    height: 0;\\r\\n}\\r\\n\\r\\n.sideMarker {\\r\\n    height: 100%;\\r\\n    width: 30%;\\r\\n    font-size: 3vh;\\r\\n    background-color: rgb(117, 120, 134);\\r\\n\\r\\n    padding-left: 3%;\\r\\n    border-top-right-radius: 12px;\\r\\n    border-bottom-right-radius: 12px;\\r\\n    display: flex;\\r\\n    text-align: center;\\r\\n    align-items: center;\\r\\n    justify-content: center;\\r\\n    margin-right: 0;\\r\\n    margin-left: auto;\\r\\n    transition: background-color 0.2s ease-in;\\r\\n}\\r\\n.sideMarker > * {\\r\\n    background-color: transparent;\\r\\n}\\r\\n.activeSide {\\r\\n    background-color: rgb(216, 218, 228);\\r\\n}\\r\\n.pencilIcon {\\r\\n    opacity: 30%;\\r\\n    padding-right: 3%;\\r\\n    padding-left: 3%;\\r\\n}\\r\\n.pencilIcon:hover {\\r\\n    opacity: 80%;\\r\\n}\\r\\n.nameInput {\\r\\n    border: none;\\r\\n    border-radius: 5px;\\r\\n    height: 2em;\\r\\n    margin-right: 5px;\\r\\n}\\r\\n.hidden{\\r\\n    visibility: hidden;\\r\\n}\\r\\n\\r\\n.gameBoard {\\r\\n    background-color: rgb(117, 120, 134);\\r\\n    -webkit-box-shadow: 3px 5px 16px 7px rgba(91, 91, 91, 0.48);\\r\\n    box-shadow: 3px 5px 16px 7px rgba(91, 91, 91, 0.48);\\r\\n    border-radius: 5px;\\r\\n    width: 40%;\\r\\n    height: 70%;\\r\\n    margin: 0 auto;\\r\\n    display: flex;\\r\\n    flex-direction: row;\\r\\n    flex-wrap: wrap;\\r\\n    justify-content: center;\\r\\n    text-align: center;\\r\\n}\\r\\n\\r\\n.gameBoard > div {\\r\\n    width: 32%;\\r\\n    height: 32%;\\r\\n    background-color: rgb(180, 182, 192);\\r\\n    margin: 0.5%;\\r\\n    border-radius: 4px;\\r\\n    user-select: none;\\r\\n    -webkit-user-drag: none;\\r\\n    transition: 0.1s;\\r\\n    align-items: center;\\r\\n    display: flex;\\r\\n    justify-content: center;\\r\\n    -webkit-box-shadow: 3px 5px 16px 7px rgba(91, 91, 91, 0.48);\\r\\n    box-shadow: 3px 5px 16px 7px rgba(91, 91, 91, 0.48);\\r\\n}\\r\\n.gameBoard > div:hover {\\r\\n    transform: scale(1.03);\\r\\n}\\r\\n.gameBoard img {\\r\\n    background: transparent;\\r\\n    width: 60%;\\r\\n    height: 60%;\\r\\n    animation: fadeIn 0.2s linear;\\r\\n}\\r\\n@media screen and (max-width: 1300px) {\\r\\n    .header {\\r\\n        display: none;\\r\\n    }\\r\\n    .playerBox > h1 {\\r\\n        font-size: 2vh;\\r\\n    }\\r\\n    .sideMarker {\\r\\n        font-size: 2vh;\\r\\n    }\\r\\n}\\r\\n\\r\\n@media screen and (max-width: 670px) {\\r\\n.mainContent{\\r\\n    width:90%;\\r\\n}\\r\\n.gameBoard{\\r\\n    width:90%;\\r\\n}\\r\\n.scoreBoard{\\r\\n    width:90%;\\r\\n}\\r\\n\\r\\n}\\r\\n\\r\\n@keyframes fadeIn {\\r\\n    0% {\\r\\n        opacity: 0;\\r\\n    }\\r\\n    100% {\\r\\n        opacity: 1;\\r\\n    }\\r\\n}\\r\\n@keyframes dropdown {\\r\\n    0% {\\r\\n        height: 0;\\r\\n    }\\r\\n    100% {\\r\\n        height: 1;\\r\\n    }\\r\\n}\\r\\n@keyframes colorChangeActive {\\r\\n}\\r\\n.gameBoard h1 {\\r\\n    background-color: transparent;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    color: rgb(44, 44, 44);\\r\\n    animation-name: fadeIn;\\r\\n    animation-duration: 1s;\\r\\n    height: fit-content;\\r\\n\\r\\n}\\r\\n.computerIcon {\\r\\n    opacity: 30%;\\r\\n}\\r\\n\\r\\n.disabled {\\r\\n    pointer-events: none;\\r\\n}\\r\\n.active {\\r\\n    opacity: 100%;\\r\\n}\\r\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://tic-tac-toe/./src/styles.css?./node_modules/css-loader/dist/cjs.js");

/***/ }),