如何在TypeScript + React项目中正确引入minified Bootstrap CSS文件

问题核心原因排查与修复 #

1. 移除CDN专属属性 #

你当前的link标签附带的integrity和crossorigin是CDN资源的完整性校验属性，本地存储的Bootstrap CSS文件哈希与官方CDN资源哈希不一致，会触发浏览器的资源加载拦截，直接删除这两个属性即可。

2. 按文件存放位置修正引用方式 #

情况1：CSS文件存放在public/assets/css目录下

public目录的资源会被构建工具直接作为网站根路径的静态资源托管，不能用相对路径./引用，修改link标签为：

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

情况2：CSS文件存放在src/assets/css目录下

src目录下的资源需要经过构建工具编译处理，无法直接在index.html中引用，操作步骤如下：

• 首先删除index.html中对应的Bootstrap CSS link标签
• 在项目入口文件src/index.tsx的顶部添加引入代码：

import './assets/css/bootstrap.min.css'

效果验证 #

启动项目后打开浏览器开发者工具，切换到「网络」面板筛选CSS资源，确认bootstrap.min.css加载状态：

• 若返回404：再次核对文件存放路径与引用路径是否匹配
• 若返回200但样式不生效：检查组件内使用的Bootstrap类名是否拼写正确，是否存在自定义全局样式覆盖了Bootstrap默认样式

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