CODEWITHSUNDEEP
vitereact-tsx
Marcb7
Marcb7

Reputation: 109

How to import Bootstrap into Vite projects

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:

enter image description here

The custom.css file looks like this:

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

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

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

Upvotes: 7

Views: 8457

Answers (5)

OmidDarvishi
OmidDarvishi

Reputation: 650

you can use this code

export default defineConfig({
plugins: [
    laravel({
        input: 'resources/js/app.js',
        ssr: 'resources/js/ssr.js',
        refresh: true,
    }),
    vue({
        template: {
            transformAssetUrls: {
                base: null,
                includeAbsolute: false,
            },
        },
    }),
    DefineOptions()
],
resolve: {
    alias: {
        '~bootstrap': path.resolve('node_modules/bootstrap'),
        'vue$': path.resolve('node_modules/vue/dist/vue.runtime.esm.js'),
    }
},

});

Upvotes: 1

desa
desa

Reputation: 196

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
  }
}

Upvotes: 0

Valentino
Valentino

Reputation: 542

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/

Upvotes: 0

Marcb7
Marcb7

Reputation: 109

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.

Upvotes: -1

user633440
user633440

Reputation:

Try it without the '~' tilde character.

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

Upvotes: 10

Related Questions