在 Jhipster Angular 项目中设置 Fullcalendar

Question

我正在尝试将 Fullcalendar 添加到 Jhipster(6.10.3) 和 angular 10 项目

在 Angular CLI 中一切正常

知道如何使用它吗？

Package.json :

"@fullcalendar/angular": "^5.3.1",
"@fullcalendar/core": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/interaction": "^5.3.1",
"@fullcalendar/list": "^5.3.1",
"@fullcalendar/timegrid": "^5.3.1",

堆栈跟踪：

ERROR in ./node_modules/@fullcalendar/common/main.css 1:0
Module parse failed: Unexpected token (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
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;

ERROR in ./node_modules/@fullcalendar/daygrid/main.css 2:0
Module parse failed: Unexpected token (2: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
|
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }

ERROR in ./node_modules/@fullcalendar/list/main.css 2:0
Module parse failed: Unexpected token (2: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
|
> :root {
|   --fc-list-event-dot-width: 10px;
|   --fc-list-event-hover-bg-color: #f5f5f5;

ERROR in ./node_modules/@fullcalendar/timegrid/main.css 6:0
Module parse failed: Unexpected token (6: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
| */
|
> .fc-v-event { /* allowed to be top-level */
|   display: block;
|   border: 1px solid #3788d8;
i ｢wdm｣: Failed to compile.

谢谢

Answer 1

我想现在可以了：

我在 webpack.dev.js

中添加了一个加载器

 {
                test: /\.css$/i,
                use: [
                  'handlebars-loader', // handlebars loader expects raw resource string
                  'extract-loader',
                  'css-loader',
                ],
              },

然后必须安装：

npm i handlebars-loader --save
npm i extract-loader --save
npm install --save handlebars

我还必须将其添加到 content/scss/vendor.scss:

@import '~@fullcalendar/common/main.css';
@import '~@fullcalendar/daygrid/main.css';

在 Jhipster Angular 项目中设置 Fullcalendar

Setup Fullcalendar in a Jhipster Angular project

fullcalendar

jhipster

angular