如何在 viteJs 中使用 react-bootstrap？

Question

React-bootstrap 似乎不適用於 vite。 當我嘗試時，react-bootstrap styles 不工作。

例如，這里是我的App.jsx ，它啟動了我的應用程序。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.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

這是一個 stackblitz 代碼鏈接，它將幫助您在上下文中更好地理解問題。

我期待 React-bootstrap styles 正確顯示，但它沒有發生。

Answer 1

不知道跟Vitejs有沒有關系。 在我看來，原因是您忘記為 React-bootstrap 導入必要的 styles。

這是React-bootstrap 頁面的引述：

因為 React-Bootstrap 不依賴於非常精確的 Bootstrap 版本，所以我們不附帶任何包含的 CSS。但是，使用這些組件需要一些樣式表。

因此，就您而言，我認為您應該將 bootstrap 安裝為依賴項，然后將其導入 main.tsx

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

這是您示例的修改后的回購協議：https://stackblitz.com/edit/vitejs-vite-ut2pbv?file=src/App.jsx

希望它能幫助你。