TypeScript文件中无法导入Bootstrap CSS文件是什么原因？

• 构建工具CSS处理配置缺失
  大多数前端构建工具（Webpack/Vite/Rollup等）需要单独配置CSS文件的处理规则，才能支持直接导入CSS文件：

  • Webpack项目需要在webpack.config.js的module.rules中配置style-loader和css-loader来解析CSS文件，缺少对应配置时，构建工具无法识别.css后缀的导入资源，会直接抛出错误
  • Vite项目默认支持CSS导入，若你手动配置了assetsInclude、exclude等规则覆盖了CSS文件的默认处理逻辑，也会导致导入失败
    而SCSS文件只要你安装了sass依赖，大多数构建工具会自动匹配处理规则，所以可以正常导入。

• 导入路径异常
  首先你提供的SCSS导入路径import bs from "bootstrap/sss/bootstrap.scss"大概率是拼写错误，正确官方路径应为bootstrap/scss/bootstrap.scss，你可以先检查项目node_modules目录下是否存在bootstrap/dist/css/bootstrap.css文件：

  • 如果文件不存在，说明Bootstrap包安装不完整，重新安装依赖即可解决
  • 如果你的项目配置了别名、模块解析规则修改了node_modules的查找逻辑，也可能导致CSS路径解析失败、SCSS路径解析正常的情况。

• 导入语法不匹配配置
  部分框架或构建工具配置了样式文件的导入规则，只允许使用无赋值的样式导入语法import "bootstrap/dist/css/bootstrap.css"，你使用的赋值式导入语法import bs from "bootstrap/dist/css/bootstrap.css"会被拦截，只有SCSS文件因为允许导出变量所以支持赋值式导入，就会出现两种导入效果不一致的情况。

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