使用color-calendar遇MIME类型错误求助（纯JS无框架）

问题原因分析 #

你遇到的两个错误对应两个核心问题：

• text/html MIME错误：直接导入color-calendar包名时，静态服务器无法解析package.json的入口配置，返回了目录的HTML索引页而非目标JS文件。
• text/css MIME错误：浏览器原生ES模块不支持直接导入CSS文件，这种语法依赖Webpack、Vite等构建工具处理，纯静态环境下会被当作JS模块解析，导致MIME类型不匹配。

具体修复步骤 #

1. 调整CSS引入方式 #

删除calendar.js中的CSS导入语句：

// 移除该行
// import '../node_modules/color-calendar/dist/css/theme-glass.css';

在dashboard.html的<head>标签内添加link标签引入主题样式：

<link rel="stylesheet" href="../node_modules/color-calendar/dist/css/theme-glass.css">

2. 修正Calendar模块的导入路径 #

将calendar.js中的包名导入改为具体的JS文件路径（静态服务器不会自动解析package.json的main字段）：

// 原导入语句
// import Calendar from '../node_modules/color-calendar';
// 修改为实际JS文件路径
import Calendar from '../node_modules/color-calendar/dist/js/color-calendar.js';

3. 验证服务器运行 #

确保以项目根目录（包含node_modules、js文件夹、dashboard.html的目录）为工作目录启动http-server：

npx http-server

访问默认地址http://localhost:8080并打开dashboard.html页面即可。

额外注意事项 #

• 使用Live Server扩展时，需确保VS Code的工作区根目录为项目根目录，避免路径解析错误。
• 若color-calendar的文件结构有变动，需根据node_modules/color-calendar/dist下的实际文件位置调整导入路径。

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