如何在Vite中使用React-Bootstrap？样式不生效问题求助

React-Bootstrap仅是Bootstrap的React组件封装，不包含Bootstrap核心样式文件，这是样式失效的核心原因。按以下步骤解决：

1. 安装Bootstrap依赖 #

在项目根目录的终端执行安装命令：

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

2. 引入Bootstrap CSS #

在项目入口文件（如src/main.jsx）或App.jsx的顶部添加样式引入语句：

import 'bootstrap/dist/css/bootstrap.min.css';

修改后的App.jsx示例：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
// 引入Bootstrap核心样式
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button'
import Accordion from 'react-bootstrap/Accordion';

function App() {
  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>

      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}

      <!-- more markup removed -->
     
    </div>
  )
}

export default App

完成以上操作后，React-Bootstrap组件的样式即可正常渲染。

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