How to import Bootstrap into Vite projects

Question

How do I correctly import Bootstrap inside a react-ts project opened with Vite? What are the correct commands?

I had this error in the browser after importing the bootstrap in my App.tsx:

The custom.css file looks like this:

$theme-colors: (
  "primary": #407BFF
);

$body-bg: #E5E5E5;
$body-color: #263238;

@import '~bootstrap/scss/bootstrap.scss';

score 4 · Answer 1 · answered Jul 22 '22 at 19:19

4

Try it without the '~' tilde character.

@import 'bootstrap/scss/bootstrap.scss';

answered Jul 22 '22 at 19:19

Karl Hill

12,937
5
58
95

or add the ~bootstrap alias to the vite config – Valentino Mar 16 '23 at 16:27

score 0 · Answer 2 · answered Mar 16 '23 at 16:26

this is an excellent tutorial for Bootstrap 4 https://dev.to/kouts/how-to-create-a-vue-js-2-bootstrap-4-project-with-vite-54f1

The process for Bootstrap 5 is more straightforward and you can find it in the official BS5 documentation https://getbootstrap.com/docs/5.2/getting-started/vite/

score 0 · Answer 3 · answered Aug 04 '23 at 10:49

I had a project setup with vite + react + swc.

The code from this documentation worked perfectly to get rid of the error for me. I only used the resolve-alias part in my config.

Valentino also mention it in their comment, so this is just the same answer with a bit more information.

const path = require('path')
export default {


root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}

score -1 · Answer 4 · answered Jul 24 '22 at 08:10

-1

Without the tilde character, the error was resolved and the page now runs normally.

Is this the only way to import the bootstrap, without the tilde in the code? On the Vite website (https://getbootstrap.com/docs/5.2/getting-started/vite/), in the 'Setup' topic, some commands are suggested, but I haven't used them, I still don't know how to open a project correctly using those commands.

answered Jul 24 '22 at 08:10

Marcb7

79
1
7

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Goutham J.M Jul 28 '22 at 09:11

How to import Bootstrap into Vite projects

4 Answers4