1

React-bootstrap doesn't seem to work with vite. When I try, react-bootstrap styles are not working.

Here, for example, is my App.jsx which kicks off my application.

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

Here is a stackblitz Code Link, which will help you understand the issue better in context.

I am expecting React-bootstrap styles to appear properly, but it doesn't happen.

ruffin
  • 16,507
  • 9
  • 88
  • 138
Venkat
  • 56
  • 1
  • 7

1 Answers1

3

I wonder if it has anything to do with Vitejs. In my point of view, the reason is that you forgot to import the necessary styles for React-bootstrap.

Here is a quote from React-bootstrap page:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.

So in your case, I think you should install bootstrap as a dependency, then import it in your main.tsx

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

Here is a modified repo of your example: https://stackblitz.com/edit/vitejs-vite-ut2pbv?file=src/App.jsx

Hope it can help you.

khoi nguyen
  • 416
  • 3
  • 7
  • yes, I didn't notice in react-bootstrap docs. Later I found it . Now it is working fine. Thanks for your valuable reply. – Venkat Nov 09 '22 at 09:44
  • I see your suggestion and a suggestion to add a conventional `link` tag in your index.html [on the React-Bootstrap docs here](https://react-bootstrap.github.io/getting-started/introduction/#css). Can you tell me why you prefer the `import` over the CDN? – ruffin Jan 23 '23 at 17:04
  • About choosing between link or import, I don't have a clear answer here. Why I suppose using import is because the author repo already used npm to install packages, so I suggest he/she do the same with react-bootstrap. If he/she used CDN, I would add a link tag in the answer for him. You can check this post that thought more about CDN and local import if you like: https://stackoverflow.com/questions/42591235/is-it-better-to-use-cdn-for-js-and-similar-resources-vs-local – khoi nguyen Jan 25 '23 at 01:01