What’s the right way to compile Bootstrap Sass with Vite?

Asked on Jul 26, 2025

1 Answer

To compile Bootstrap Sass with Vite, you can set up a Vite project and configure it to process Bootstrap's Sass files. This involves installing necessary packages and configuring Vite to handle Sass.

<!-- BEGIN COPY / PASTE -->
        // 1. Install Vite and Sass
        // Run the following commands in your terminal
        npm init vite@latest my-project --template vanilla
        cd my-project
        npm install
        npm install sass bootstrap

        // 2. Create a main.scss file in your src directory
        // src/main.scss
        @import 'bootstrap/scss/bootstrap';

        // 3. Update your Vite config to include Sass
        // vite.config.js
        import { defineConfig } from 'vite';

        export default defineConfig({
            css: {
                preprocessorOptions: {
                    scss: {
                        additionalData: `@import "src/main.scss";`
                    }
                }
            }
        });

        // 4. Import the main.scss in your main.js
        // src/main.js
        import './main.scss';
        <!-- END COPY / PASTE -->

Additional Comment:

Initialize a new Vite project using the vanilla template.
Install the necessary packages: Sass and Bootstrap.
Create a `main.scss` file in the `src` directory and import Bootstrap's Sass.
Configure Vite to handle Sass by modifying `vite.config.js` to include the `scss` preprocessor options.
Import the `main.scss` file in your `main.js` to ensure it's included in the build.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions