React-Bootstrap在Vite.js(React)中失效？如何在Vite.js中使用它？

失效原因 #

React-Bootstrap只是Bootstrap的React组件封装层，本身不包含Bootstrap的核心样式文件。你只导入了Button组件，但没引入Bootstrap的CSS，所以组件只有结构逻辑，没有对应的样式渲染。

正确配置步骤 #

1. 安装必要依赖 #

首先确保同时安装react-bootstrap和bootstrap（后者是样式来源，必须安装）：

npm install react-bootstrap bootstrap
# 或者用yarn
yarn add react-bootstrap bootstrap

2. 全局引入Bootstrap样式 #

在项目的主入口文件（通常是src/main.jsx）中导入Bootstrap的CSS文件：

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css' // 添加这一行

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

3. 验证效果 #

重启Vite开发服务器，此时Button的variant="primary"样式就能正常显示了。

额外注意事项 #

• 版本匹配：React-Bootstrap v2.x及以上适配Bootstrap 5，如果你装的是Bootstrap 4，要对应使用React-Bootstrap v1.x版本，版本不匹配会导致样式异常。
• 样式冲突：不要随意覆盖Bootstrap的核心样式类，若需自定义样式，建议用自定义类名结合优先级更高的CSS规则来修改。

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