How to use Bootstrap 5 with Vite?

[dosstx]

How to use Bootstrap 5 with Vite? If you don't know what Vite is:

Before ES modules were available in browsers, developers had no native mechanism for authoring JavaScript in a modularized fashion. This is why we are all familiar with the concept of "bundling": using tools that crawl, process and concatenate our source modules into files that can run in the browser.

Over time we have seen tools like webpack, Rollup and Parcel, which greatly improved the development experience for frontend developers.

However, as we start to build more and more ambitious applications, the amount of JavaScript we are dealing with also increased exponentially. It is not uncommon for large scale projects to contain thousands of modules. We are starting to hit a performance bottleneck for JavaScript based tooling: it can often take an unreasonably long wait (sometimes up to minutes!) to spin up a dev server, and even with HMR, file edits can take a couple seconds to be reflected in the browser. The slow feedback loop can greatly affect developers' productivity and happiness.

Vite aims to address these issues by leveraging new advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages.
-- https://vitejs.dev/guide/why.html

I've used Vite with Tailwind and it is FAST. Is it possible to get some documentation on how to use Bootstrap 5 with Vite? Thank you

[dosstx]

I've researched and it appears you need the following dependencies to use with Vite:

  "devDependencies": {
    "autoprefixer": "10.4.5",
    "bootstrap": "^5.1.3",
    "nuxt": "3.0.0-rc.3", //<--- I am using Nuxt3 as the framework
    "postcss": "^8.4.13",
    "sass": "^1.51.0"
  }

[fosterdouglas]

Can you share a bit more about the setup you've landed on?

I'm using Nuxt 3 (rc.6) and Bootstrap 5.2, and have tried so many ways to try and get the CSS/SASS/scoped styles working properly together. I'm using the preprocessorOptions: for Vite in my nuxt.config file, but it's not quite coming together.

The only way I've got it "looking" right is to also import the entire bootstrap package in the additionalData of Vite, which is obviously absurd, since this is loading BS many many times unnecessarily.

Let me know if you can share a bit about how you're using BS5.2 and Nuxt 3 together !

[mdo]

We're shipping a Vite + Bootstrap guide and example in our upcoming stable release of v5.2.0. You don't need Nuxt to use Vite. Check out #36412 for now until it goes live in hopefully a week or so.

[dosstx]

wonderful!

I've been using tailwind and bootstrap 5.2 beta and prefer Bootstrap as it has the right balance of components and utilities. Keep up the great work, @mdo !

[florianlacreuse]

v5.2.0 has been released, direct link: https://getbootstrap.com/docs/5.2/getting-started/vite/