Goals:

I'm configuring Nuxt 3 with Vuetify 3, and my goal is to:

• Customize SCSS variables for Vuetify.
• Access these customized SCSS variables both inside Vue components and from SCSS files in assets/styles.
• Build a static site with server-side rendering (SSR).

My Setup

I'm following this guide: Nuxt 3 and Vuetify 3 Setup for a Design System, but I'm not achieving the expected results.

Currently, the overridden variables are correctly applied to Vuetify components (i.e., I can see the styles reflecting the custom values), but when I try to access these variables inside Vue components, they still have the default values.

Example

Here’s my setup:

assets/styles/vuetify.scss

@use "vuetify/settings" with (
  $font-size-root: 18px,
);

pages/index.vue

<template>
  <p>This text is 18px</p>
</template>

<style lang="scss">
  @debug $font-size-root; // Outputs "1rem" instead of "18px"
</style>

assets/styles/main.scss

@use "vuetify/settings" with (
  @debug $font-size-root; // Outputs "1rem" instead of "18px"
);

Issue

The @debug $font-size-root; statement inside index.vue logs "1rem" instead of my custom "18px".

However, Vuetify itself correctly applies the 18px font size to components.

It seems like the SCSS variables defined in vuetify.scss are not globally available to my Vue components.

Question

How can I configure Nuxt 3 so that the SCSS variables exposed globally reflect my customizations? Specifically, how can I ensure that both Vuetify and my Vue components have access to the same modified SCSS variables?

I have tried modifying the SCSS setup by including the customized Vuetify variables in different ways through nuxt.config.ts. but I still can't get the customized SCSS variables to be globally accessible in both Vue components and my external SCSS files.

I expected that the SCSS variables, after being customized, would reflect the updated values in both Vuetify components and any SCSS I include in my Vue components. However, even though Vuetify is correctly applying the customized variables, when I try to access them in my own code, the original values are still being used.

Goals:

I'm configuring Nuxt 3 with Vuetify 3, and my goal is to:

• Customize SCSS variables for Vuetify.
• Access these customized SCSS variables both inside Vue components and from SCSS files in assets/styles.
• Build a static site with server-side rendering (SSR).

My Setup

I'm following this guide: Nuxt 3 and Vuetify 3 Setup for a Design System, but I'm not achieving the expected results.

Currently, the overridden variables are correctly applied to Vuetify components (i.e., I can see the styles reflecting the custom values), but when I try to access these variables inside Vue components, they still have the default values.

Example

Here’s my setup:

assets/styles/vuetify.scss

@use "vuetify/settings" with (
  $font-size-root: 18px,
);

pages/index.vue

<template>
  <p>This text is 18px</p>
</template>

<style lang="scss">
  @debug $font-size-root; // Outputs "1rem" instead of "18px"
</style>

assets/styles/main.scss

@use "vuetify/settings" with (
  @debug $font-size-root; // Outputs "1rem" instead of "18px"
);

Issue

The @debug $font-size-root; statement inside index.vue logs "1rem" instead of my custom "18px".

However, Vuetify itself correctly applies the 18px font size to components.

It seems like the SCSS variables defined in vuetify.scss are not globally available to my Vue components.

Question

How can I configure Nuxt 3 so that the SCSS variables exposed globally reflect my customizations? Specifically, how can I ensure that both Vuetify and my Vue components have access to the same modified SCSS variables?

I have tried modifying the SCSS setup by including the customized Vuetify variables in different ways through nuxt.config.ts. but I still can't get the customized SCSS variables to be globally accessible in both Vue components and my external SCSS files.

I expected that the SCSS variables, after being customized, would reflect the updated values in both Vuetify components and any SCSS I include in my Vue components. However, even though Vuetify is correctly applying the customized variables, when I try to access them in my own code, the original values are still being used.

• sass
• vuetify.js
• server-side-rendering
• nuxt3.js

1 Answer 1

Coincidentally, recently I did the exact same.

In nuxt.config.ts:

export default defineNuxtConfig({ 
    css: ['@/assets/css/globals.scss'],
});

In assets/css/globals.scss:

@use 'vuetify/settings' with (
    $font-size-root: 18px,
);

If you haven't installed 'vuetify-nuxt-module', you can add it by:

npx nuxi@latest module add vuetify-nuxt-module

This module comes preconfigured with SCSS. Everything should work fine now.

Additional Fix for SCSS Variable Access

To ensure SCSS variables are globally accessible in Vue components, you need to explicitly import your SCSS file in nuxt.config.ts under vite.css.preprocessorOptions:

export default defineNuxtConfig({
    css: ['@/assets/css/globals.scss'],
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/css/globals.scss" as *;'
                }
            }
        }
    }
});

This makes sure that your customized SCSS variables are available in all Vue components and SCSS files. Now, @debug $font-size-root; inside Vue components should output 18px instead of 1rem.