如何在Vite创建的React-TS项目中正确导入Bootstrap？附命令

1. 安装依赖 #

首先安装Bootstrap和Sass（你需要用SCSS变量自定义主题，所以必须安装Sass），执行以下命令之一：

npm install bootstrap sass
# 或使用yarn
yarn add bootstrap sass
# 或使用pnpm
pnpm add bootstrap sass

2. 修复SCSS导入路径问题 #

Vite不支持~作为node_modules的路径别名，这是你浏览器报错的核心原因。修改你的custom.scss文件：

$theme-colors: (
  "primary": #407BFF
);

$body-bg: #E5E5E5;
$body-color: #263238;

@import 'bootstrap/scss/bootstrap.scss';

3. 在项目中引入自定义样式 #

在App.tsx里导入你的自定义SCSS文件（而非直接导入Bootstrap）：

import './custom.scss'; // 路径根据你的文件实际位置调整

function App() {
  return (
    <div className="App">
      {/* 可添加测试元素验证样式 */}
      <button className="btn btn-primary">测试Bootstrap按钮</button>
    </div>
  );
}

export default App;

4. 验证效果 #

重启Vite开发服务器，此时浏览器控制台不会再报错，页面元素会应用你自定义的Bootstrap主题样式。

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