Webpack 样式加载器未将样式注入 DOM

Posted 2023-02-21

【中文标题】Webpack 样式加载器未将样式注入 DOM

【英文标题】：Webpack style-loader not injecting styles into DOM

【发布时间】：2021-10-12 07:13:56

【问题描述】：

我有一个 styles.css 文件，我正在尝试与 Webpack 捆绑。我已经安装了 css-loader 和 style-loader 包，并在 package.json 中列出。我已将 CSS 文件放在我已设置为 Webpack 入口点的 .js 文件中的导入语句中。查看 Webpack 输出的 .js 文件，CSS 文件已加载，但 DOM 的 script 标签中没有加载任何样式。

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"
  

这是 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");

/***/ ),

【参考方案1】：

我想通了。我的 CSS 正在加载试图加载导致它根本不加载样式的字体。删除了 URL 引用，它加载正常。