React项目引入本地bootstrap.min.css遇MIME类型错误求助

这个错误的核心原因很明确：你的开发服务器并没有正确返回bootstrap.min.css文件，反而返回了一个HTML页面（大概率是404错误页），所以浏览器检测到MIME类型是text/html而非预期的text/css，直接拒绝加载了。下面是一步步的解决方法：

1. 确认文件放置位置（Create React App 项目适用） #

如果你是用Create React App创建的React项目，所有静态资源必须放在public文件夹下——这是React开发服务器默认的静态资源根目录。你需要把assets/styles/bootstrap.min.css放到项目的public/assets/styles/路径下，对应项目结构应该是：

你的项目根目录
├── public/
│   ├── assets/
│   │   └── styles/
│   │       └── bootstrap.min.css
│   └── index.html
└── src/

2. 修正index.html里的链接路径 #

确保你的link标签使用根相对路径（开头加斜杠），避免相对路径带来的定位错误：

<link rel="stylesheet" href="/assets/styles/bootstrap.min.css">

加斜杠后，浏览器会从服务器根目录开始查找资源，不会受当前页面路径的干扰。

3. 验证资源是否能被正确访问 #

打开浏览器，直接访问http://localhost:8098/assets/styles/bootstrap.min.css：

• 如果能看到完整的CSS代码，说明路径和文件位置都没问题，刷新你的应用就能正常加载样式了。
• 如果跳转到404页面，说明文件没放对位置或者路径写错了，回到第一步重新检查。

4. 非Create React App项目的额外配置 #

如果是你手动搭建的React项目（比如自己配置webpack），需要确保开发服务器（比如webpack-dev-server）已经配置了静态资源目录。在webpack配置文件里添加devServer.static选项：

module.exports = {
  // 其他配置项...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'), // 指定你的静态资源所在目录
    },
  },
};

这样服务器才会把指定目录下的文件作为静态资源正常返回。

最后一步检查 #

确认你下载的bootstrap.min.css是完整的CSS文件——有时候下载过程中可能出错，导致文件内容变成了HTML或者其他格式，这也会引发MIME类型错误。

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