我正在尝试使用 fullcalendar.io 的完整日历。他们建议使用 Webpack 作为构建系统，但我以前从未使用过它。读了一会儿后，我得到了完整的日历，但我无法让样式表工作。我做了一些阅读，发现您需要“css-loader”和“style-loader”，并将它们放入您的 webpack.config.js 中。我尝试了我能想到的一切，但就是无法让它发挥作用。确实需要一些帮助!
元素结构
->dist
--->bundle.js
->src
--->main
----->webapp
------->JS
--------->calendar.js
----->Calendar.html
->package.json
->webpack.config.js
日历.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendar</title>
<style>
.calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
<script type="module" src="./dist/bundle.js"></script>
</head>
<body>
<div id="calendar" class="calendar"></div>
</body>
</html>
日历.js
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';
import '@fullcalendar/list/main.css';
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}
});
calendar.render();
});
package.json
{
"name": "cimplanner",
"version": "1.0.0",
"dependencies": {},
"main": "index.js",
"devDependencies": {
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"description": ""
}
webpack.config.js
const path = require('path');
module.exports = {
entry: "./src/main/webapp/sources/JS/calendar.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: "/\.css$/",
use: [
{
loader: "css-loader"
},
{
loader: "style-loader"
}
]
}
]
},
mode: "development"
};
错误
ERROR in ./node_modules/@fullcalendar/core/main.css 1:0
Module parse failed: Unexpected character '@' (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
> @charset "UTF-8";
| .fc {
| direction: ltr;
@ ./src/main/webapp/sources/JS/calendar.js 6:0-37
ERROR in ./node_modules/@fullcalendar/timegrid/main.css 1:0
Module parse failed: Unexpected character '@' (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
> @charset "UTF-8";
| /* TimeGridView all-day area
| --------------------------------------------------------------------------------------------------*/
@ ./src/main/webapp/sources/JS/calendar.js 8:0-41
ERROR in ./node_modules/@fullcalendar/daygrid/main.css 4:0
Module parse failed: Unexpected token (4: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
| --------------------------------------------------------------------------------------------------*/
| /* day row structure */
> .fc-dayGridWeek-view .fc-content-skeleton,
| .fc-dayGridDay-view .fc-content-skeleton {
| /* there may be week numbers in these views, so no padding-top */
@ ./src/main/webapp/sources/JS/calendar.js 7:0-40
ERROR in ./node_modules/@fullcalendar/list/main.css 4:0
Module parse failed: Unexpected token (4: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
| --------------------------------------------------------------------------------------------------*/
| /* possibly reusable */
> .fc-event-dot {
| display: inline-block;
| width: 10px;
@ ./src/main/webapp/sources/JS/calendar.js 9:0-37
最佳答案
找到了!
test: "/\.css$/"
更改为:
test: /\.css$/
花了我一整天的时间..
关于javascript - webpack 样式加载器和 css 加载器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61632093/