загрузчик стиля webpack и загрузчик css не работают - PullRequest
Новая
       2

загрузчик стиля webpack и загрузчик css не работают

0 голосов
/ 06 мая 2020

Я пытаюсь использовать Полный календарь с 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();
});

пакет. 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

1 Ответ

0 голосов
/ 06 мая 2020

нашел! 

test: "/\.css$/"

изменено на: 

test: /\.css$/

заняло у меня целый день ..

...