Angularで「./node_modules/@fullcalendar/common/main.css:4:0 – Error: Module parse failed: Unexpected token」
今回はAngularでfullcalendarを使用しているときに下記のエラーが起きたときの対処法についてご紹介いたします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
./node_modules/@fullcalendar/common/main.css:4:0 - Error: 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 | /* classes attached to <body> */ | /* TODO: make fc-event selector work when calender in shadow DOM */ > .fc-not-allowed, | .fc-not-allowed .fc-event { /* override events' custom cursors */ | cursor: not-allowed; ./node_modules/@fullcalendar/daygrid/main.css:2:0 - Error: 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; | } ./node_modules/@fullcalendar/list/main.css:2:0 - Error: 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; ./node_modules/@fullcalendar/resource-timeline/main.css:3:2 - Error: Module parse failed: Unexpected token (3:2) 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 .fc-resource-timeline-divider { | width: 3px; /* important to have width to shrink this cell. no cross-browser problems */ | cursor: col-resize; ./node_modules/@fullcalendar/timegrid/main.css:6:0 - Error: 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; ./node_modules/@fullcalendar/timeline/main.css:3:2 - Error: Module parse failed: Unexpected token (3:2) 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 .fc-timeline-body { | min-height: 100%; | position: relative; |
Angularのバージョンは14.2.12です。
Angularで「./node_modules/@fullcalendar/common/main.css:4:0 – Error: Module parse failed: Unexpected token」
結論から言うと、angular.jsonに次の記述を足しましょう。
"node_modules/@fullcalendar/common/main.css",
"node_modules/@fullcalendar/daygrid/main.css",
"node_modules/@fullcalendar/list/main.css",
"node_modules/@fullcalendar/resource-timeline/main.css",
"node_modules/@fullcalendar/timegrid/main.css",
"node_modules/@fullcalendar/timeline/main.css"
angular.jsonは次のようになると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{ ... "projects": { "your-project-name": { ... "architect": { "build": { ... "options": { ... "styles": [ "src/styles.scss", "node_modules/@fullcalendar/common/main.css", "node_modules/@fullcalendar/daygrid/main.css", "node_modules/@fullcalendar/list/main.css", "node_modules/@fullcalendar/resource-timeline/main.css", "node_modules/@fullcalendar/timegrid/main.css", "node_modules/@fullcalendar/timeline/main.css" ], ... }, ... }, ... } }, ... }, ... } |
これで表題のエラーは出なくなります。
終わりに
今回はAngularでfullcalendarを使用しているときに冒頭のエラーが起きたときの対処法についてご紹介いたしました。