webpack 型装载机和 css 装载机不工作

Question

我正在尝试使用 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

Answer 1

找到了！

test: "/\.css$/"

变成：

test: /\.css$/

花了我一整天..

webpack 型装载机和 css 装载机不工作

问题描述

项目结构

日历.html

日历.js

package.json

webpack.config.js

错误

1 个解决方案

解决方案1
0 2020-05-06 12:15:48

webpack 型装载机和 css 装载机不工作

问题描述

项目结构

日历.html

日历.js

package.json

webpack.config.js

错误

1 个解决方案

解决方案1 0 2020-05-06 12:15:48

解决方案1
0 2020-05-06 12:15:48