在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.

谢谢。

- khocef

---

我有完全相同的问题。 - elk-tamer

我在这个链接中找到了解决方案： https://dev59.com/ucTsa4cB1Zd3GeqPGcdb - Ibrahim Kelly

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';

- elk-tamer