Angular5/Ionic4集成FullCalendar4.1.0时CSS加载MIME类型错误求助

问题根源 #

这个报错本质是SCSS解析器没正确识别~开头的路径，导致请求的CSS文件路径错误，服务器返回了HTML（大概率是404页面），触发MIME类型不匹配的限制。

实测可行的解决方法 #

方法1：换用相对路径导入 #

直接写node_modules的相对路径，代替~符号，SCSS能直接识别：

@import '../node_modules/@fullcalendar/core/main.css';
@import '../node_modules/@fullcalendar/daygrid/main.css';

注意：路径层级要根据你的全局样式文件位置调整，比如样式文件在src/styles下，就得写成../../node_modules/...。

方法2：在Angular配置文件里全局引入 #

绕开SCSS导入，直接在项目配置里加CSS路径：

1. 打开Angular 5的配置文件.angular-cli.json
2. 找到styles数组，把FullCalendar的CSS加进去：

"styles": [
  "src/styles.scss",
  "../node_modules/@fullcalendar/core/main.css",
  "../node_modules/@fullcalendar/daygrid/main.css"
]

3. 重启开发服务器，配置才会生效。

方法3：降级FullCalendar版本 #

FullCalendar 4.x和Angular 5的兼容性可能有坑，试试降级到3.x系列：

1. 先卸载当前版本：

npm uninstall @fullcalendar/core @fullcalendar/daygrid

2. 安装适配的3.x版本：

npm install @fullcalendar/core@3.10.0 @fullcalendar/daygrid@3.10.0

3. 跟着3.x版本的文档调整导入和使用方式就行。

方法4：调整Ionic SCSS变量配置 #

Ionic 4的SCSS解析有自己的规则，试试用变量指定路径：
在src/theme/variables.scss里加：

$fullcalendar-path: '../node_modules/@fullcalendar';
@import '#{$fullcalendar-path}/core/main.css';
@import '#{$fullcalendar-path}/daygrid/main.css';

验证要点 #

• 改完一定要重启ionic serve或ng serve，缓存会坑人
• 打开浏览器开发者工具的Network标签，看CSS文件是不是200状态加载成功
• 确认加载的文件是CSS内容，不是HTML错误页

内容的提问来源于stack exchange，提问作者Alex