Webpack 样式加载器未将样式注入 DOM
Webpack style-loader not injecting styles into DOM
我有一个 styles.css 文件，我正试图与 Webpack 捆绑在一起。我已经安装了 css-loader 和 style-loader 软件包并列在 package.json 中。我在 .js 文件的导入语句中得到了 CSS 文件，我已将其设置为 Webpack 的入口点。查看 Webpack 输出的 .js 文件，CSS 文件已加载，但 DOM 的脚本标签中没有加载任何样式。
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");
/***/ }),
我想通了。我的 CSS 正在加载，试图加载导致它根本无法加载样式的字体。删除了 URL 引用并且加载正常。
我有一个 styles.css 文件，我正试图与 Webpack 捆绑在一起。我已经安装了 css-loader 和 style-loader 软件包并列在 package.json 中。我在 .js 文件的导入语句中得到了 CSS 文件，我已将其设置为 Webpack 的入口点。查看 Webpack 输出的 .js 文件，CSS 文件已加载，但 DOM 的脚本标签中没有加载任何样式。
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");
/***/ }),
我想通了。我的 CSS 正在加载，试图加载导致它根本无法加载样式的字体。删除了 URL 引用并且加载正常。