Setup React-Bootstrap in Vite project

On this page

Install NPM package

npm install sass @popperjs/core react-bootstrap bootstrap

Include stylesheets

Rename your index.css file to index.scss:

mv src/index.css src/index.scss

Include the Bootstrap Sass entry file from the NPM package by including the following in your src/index.scss file:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@import "~bootstrap/scss/bootstrap";

Make sure your root Sass file is imported in your app in src/main.tsx.

Configure Vite

npm i -D @types/node

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
})

Sources

Official docs

Tagged: React tooling

Install NPM package

Include stylesheets

Configure Vite

Sources

Leave a comment Cancel reply