SCSS Setup for Nuxt 3 with Bootstrap 5

1. Install Dependencies

# Install SCSS
npm install -D sass

# Install Bootstrap
npm install bootstrap

# Optional: Install Bootstrap Icons
npm install bootstrap-icons

2. Create SCSS Files

Create your SCSS structure in the assets folder:

assets/
├── scss/
│   ├── main.scss
│   ├── _custom.scss
│   └── _variables.scss

assets/scss/_variables.scss

// Simple Bootstrap 5 Customization
// Import this before Bootstrap: @import "custom"; @import "bootstrap/scss/bootstrap";

// =============================================================================
// COLORS
// =============================================================================
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;

// =============================================================================
// SIZES
// =============================================================================
$font-size-base: 1rem;        // 16px
$font-size-lg: 1.25rem;       // 20px
$font-size-sm: 0.875rem;      // 14px

$h1-font-size: 2.5rem;        // 40px
$h2-font-size: 2rem;          // 32px
$h3-font-size: 1.75rem;       // 28px
$h4-font-size: 1.5rem;        // 24px

// =============================================================================
// BORDER RADIUS
// =============================================================================
$border-radius: 0.5rem;       // 8px - rounded corners
$border-radius-sm: 0.25rem;   // 4px - small rounded
$border-radius-lg: 1rem;      // 16px - large rounded

// =============================================================================
// SPACING
// =============================================================================
$spacer: 1rem;                // Base spacing unit (16px)
$spacers: (
  0: 0,
  1: 0.25rem,    // 4px
  2: 0.5rem,     // 8px
  3: 1rem,       // 16px
  4: 1.5rem,     // 24px
  5: 3rem        // 48px
);

assets/scss/_custom.scss

// Your custom component styles
.custom-button {
  padding: 0.75rem 1.5rem;
  border-radius: $border-radius-lg;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.custom-card {
  border: none;
  border-radius: $border-radius-lg;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

assets/scss/main.scss

// Import your variables first
@import 'variables';

// Import Bootstrap with your customizations
@import 'bootstrap/scss/bootstrap';

// Import your custom styles
@import 'custom';

// Global styles
body {
  font-family: $font-family-base;
}

3. Configure Nuxt 3

nuxt.config.ts

export default defineNuxtConfig({
  // Global CSS
  css: [
    '~/assets/scss/main.scss'
  ],
  
  // Vite configuration for SCSS
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/scss/_variables.scss" as *;'
        }
      }
    }
  },

  // Optional: Add Google Fonts
  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com'
        },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: ''
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
        }
      ]
    }
  }
})

4. Alternative: Module-based Setup

nuxt.config.ts (Alternative approach)

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/google-fonts' // Optional
  ],
  
  css: [
    '~/assets/scss/main.scss'
  ],
  
  googleFonts: {
    families: {
      Inter: [300, 400, 500, 600, 700]
    }
  }
})

5. Using Bootstrap in Components

components/CustomButton.vue

<template>
  <button :class="buttonClasses" @click="handleClick">
    <slot />
  </button>
</template>

<script setup>
const props = defineProps({
  variant: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'md'
  }
})

const buttonClasses = computed(() => [
  'btn',
  `btn-${props.variant}`,
  props.size !== 'md' ? `btn-${props.size}` : '',
  'custom-button'
])

const handleClick = () => {
  // Handle click
}
</script>

pages/index.vue

<template>
  <div class="container my-5">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <div class="card custom-card">
          <div class="card-body">
            <h1 class="card-title text-primary">Hello Nuxt 3 + Bootstrap!</h1>
            <p class="card-text">This is a custom Bootstrap setup with SCSS.</p>
            <CustomButton variant="primary" size="lg">
              Custom Button
            </CustomButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

6. Using SCSS in Components

You can also use SCSS directly in your components:

<template>
  <div class="hero-section">
    <h1>Welcome</h1>
  </div>
</template>

<style lang="scss" scoped>
.hero-section {
  background: linear-gradient(135deg, $primary, $secondary);
  padding: $spacer * 4;
  border-radius: $border-radius-lg;
  color: white;
  text-align: center;
  
  h1 {
    font-size: $font-size-base * 2.5;
    margin-bottom: $spacer;
  }
}
</style>

7. Bootstrap JavaScript (Optional)

If you need Bootstrap's JavaScript components:

npm install @popperjs/core

plugins/bootstrap.client.js

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle.min.js'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      bootstrap
    }
  }
})

File Structure Summary

project/
├── assets/
│   └── scss/
│       ├── main.scss
│       ├── _variables.scss
│       └── _custom.scss
├── components/
│   └── CustomButton.vue
├── pages/
│   └── index.vue
├── plugins/
│   └── bootstrap.client.js
├── nuxt.config.ts
└── package.json

Quick Commands

# Install dependencies
npm install -D sass
npm install bootstrap

# Start development server
npm run dev

# Build for production
npm run build

That's it! Your Nuxt 3 project now has SCSS with Bootstrap 5 fully configured. The styles will be automatically compiled and hot-reloaded during development.