Vuetify typography override fix

March 22, 2025 · AI Conversations

User
@use 'sass:math';
@use 'sass:map';
@use 'sass:meta';
@use 'vuetify/lib/styles/tools/functions' as *;

// This will false all colors which is not necessory for theme
$color-pack: false;

// Global font size and border radius
$font-size-root: 1rem;
$border-radius-root: 12px !default;
$body-font-family: 'Roboto', sans-serif !default;
$heading-font-family: $body-font-family !default;
$btn-font-weight: 400 !default;
$btn-letter-spacing: 0 !default;

// Global Radius as per breakeven point
$rounded: () !default;
$rounded: map-deep-merge(
(
0: 0,
'sm': $border-radius-root * 0.5,
null: $border-radius-root,
'md': $border-radius-root * 1,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%,
'shaped': $border-radius-root * 6 0
),
$rounded
);
// Global Typography
$typography: () !default;
$typography: map-deep-merge(
(
'h1': (
'size': 2.125rem,
'weight': 700,
'line-height': 3.5rem,
'font-family': inherit
),
'h2': (
'size': 1.5rem,
'weight': 700,
'line-height': 2.5rem,
'font-family': inherit
),
'h3': (
'size': 1.25rem,
'weight': 600,
'line-height': 2rem,
'font-family': inherit
),
'h4': (
'size': 1rem,
'weight': 600,
'line-height': 1.5rem,
'font-family': inherit
),
'h5': (
'size': 0.875rem,
'weight': 500,
'line-height': 1.2rem,
'font-family': inherit
),
'h6': (
'size': 0.75rem,
'weight': 500,
'font-family': inherit
),
'subtitle-1': (
'size': 0.875rem,
'weight': 500,
'line-height': 1rem,
'font-family': inherit
),
'subtitle-2': (
'size': 0.75rem,
'weight': 400,
'line-height': 1rem,
'font-family': inherit
),
'body-1': (
'size': 0.875rem,
'weight': 400,
'font-family': inherit
),
'body-2': (
'size': 0.75rem,
'weight': 400,
'font-family': inherit
),
'button': (
'size': 0.875rem,
'weight': 500,
'font-family': inherit,
'text-transform': uppercase
),
'caption': (
'size': 0.75rem,
'weight': 400,
'font-family': inherit
),
'overline': (
'size': 0.75rem,
'weight': 500,
'font-family': inherit,
'text-transform': uppercase
)
),
$typography
);

// Custom Variables
// colors
$white: #fff !default;

// cards
$card-item-spacer-xy: 20px 24px !default;
$card-text-spacer: 24px !default;
$card-title-size: 18px !default;
// Global Shadow
$box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
typohrahy not work after chanhges to @use

Assistant
When switching from `@import` to `@use` in Sass, the way variables, mixins, and functions are shared and accessed changes. The issue you're experiencing — **typography not working after changing to `@use`** — is likely due to the **scope isolation** introduced by `@use`.

Here’s what’s going wrong and how to fix it.

—

### 🔍 Problem
When you use:

@use 'vuetify/lib/styles/tools/functions' as *;

You're pulling in functions, but **not the rest of Vuetify's Sass variables or configuration layers**, especially not the `$typography` config expected by Vuetify's theme engine.

Also, Vuetify expects you to configure styles **before** importing its stylesheets. If typography isn’t working, it likely means that:

– Vuetify isn’t using your `$typography` map because it was defined **after** or in the wrong context.
– Your changes aren’t being picked up due to incorrect use of `@use` instead of `@forward`.

—

### ✅ Solution

Here’s how to properly override Vuetify's default variables using the `@use` system:

#### 1. Create a `_variables.scss` file with your overrides (as you have)

// styles/_variables.scss
@use 'sass:map';
@use 'vuetify/lib/styles/tools/functions' as *;

$font-size-root: 1rem !default;
$border-radius-root: 12px !default;
$typography: (
  'h1': (
    'size': 2.125rem,
    'weight': 700,
    'line-height': 3.5rem
  ),
  // ... other typography settings
) !default;

// You can also forward the variables
@forward 'vuetify/lib/styles/settings/_variables' with (
  $font-size-root: $font-size-root,
  $border-radius-root: $border-radius-root,
  $typography: $typography
);

#### 2. In your main `styles.scss`, load Vuetify like this:

@use './styles/variables'; // Your override file
@use 'vuetify/lib/styles/main';

This way, your typography and other config options are picked up by Vuetify **before it compiles styles**.

—

### 📌 Notes
– Vuetify **requires `@use` + `@forward`** structure for proper customization.
– Variables like `$typography` need to be passed using `@forward … with (…)` if you're overriding built-in Vuetify settings.
– Always import your variable overrides **before** Vuetify's `main` styles.

—

Let me know if you'd like me to help refactor your current SCSS setup or if you want a working example with Vuetify 3 + Vite + SCSS.

User
give updated files
Assistant
Sure! Here's how you can refactor your SCSS files to make Vuetify's typography customization work correctly using `@use` and `@forward`.

—

### ✅ File 1: `src/styles/_variables.scss`
> This file contains your custom overrides and forwards them to Vuetify.

// src/styles/_variables.scss
@use 'sass:map';
@use 'sass:math';

$color-pack: false !default;
$font-size-root: 1rem !default;
$border-radius-root: 12px !default;
$body-font-family: 'Roboto', sans-serif !default;
$heading-font-family: $body-font-family !default;
$btn-font-weight: 400 !default;
$btn-letter-spacing: 0 !default;

// Rounded map
$rounded: () !default;
$rounded: map.deep-merge(
  (
    0: 0,
    'sm': $border-radius-root * 0.5,
    null: $border-radius-root,
    'md': $border-radius-root * 1,
    'lg': $border-radius-root * 2,
    'xl': $border-radius-root * 6,
    'pill': 9999px,
    'circle': 50%,
    'shaped': $border-radius-root * 6 0
  ),
  $rounded
);

// Typography map
$typography: () !default;
$typography: map.deep-merge(
  (
    'h1': (
      'size': 2.125rem,
      'weight': 700,
      'line-height': 3.5rem,
      'font-family': inherit
    ),
    'h2': (
      'size': 1.5rem,
      'weight': 700,
      'line-height': 2.5rem,
      'font-family': inherit
    ),
    'h3': (
      'size': 1.25rem,
      'weight': 600,
      'line-height': 2rem,
      'font-family': inherit
    ),
    'h4': (
      'size': 1rem,
      'weight': 600,
      'line-height': 1.5rem,
      'font-family': inherit
    ),
    'h5': (
      'size': 0.875rem,
      'weight': 500,
      'line-height': 1.2rem,
      'font-family': inherit
    ),
    'h6': (
      'size': 0.75rem,
      'weight': 500,
      'font-family': inherit
    ),
    'subtitle-1': (
      'size': 0.875rem,
      'weight': 500,
      'line-height': 1rem,
      'font-family': inherit
    ),
    'subtitle-2': (
      'size': 0.75rem,
      'weight': 400,
      'line-height': 1rem,
      'font-family': inherit
    ),
    'body-1': (
      'size': 0.875rem,
      'weight': 400,
      'font-family': inherit
    ),
    'body-2': (
      'size': 0.75rem,
      'weight': 400,
      'font-family': inherit
    ),
    'button': (
      'size': 0.875rem,
      'weight': 500,
      'font-family': inherit,
      'text-transform': uppercase
    ),
    'caption': (
      'size': 0.75rem,
      'weight': 400,
      'font-family': inherit
    ),
    'overline': (
      'size': 0.75rem,
      'weight': 500,
      'font-family': inherit,
      'text-transform': uppercase
    )
  ),
  $typography
);

// Forward Vuetify settings with overrides
@forward 'vuetify/lib/styles/settings/_variables' with (
  $color-pack: $color-pack,
  $font-size-root: $font-size-root,
  $border-radius-root: $border-radius-root,
  $rounded: $rounded,
  $typography: $typography,
  $body-font-family: $body-font-family,
  $heading-font-family: $heading-font-family,
  $btn-font-weight: $btn-font-weight,
  $btn-letter-spacing: $btn-letter-spacing
);

—

### ✅ File 2: `src/styles/styles.scss`
> This is your main SCSS entry file.

// src/styles/styles.scss

// Import the overrides first
@use './variables';

// Import Vuetify styles
@use 'vuetify/lib/styles/main';

—

### ✅ Vue or Vite Entry (e.g. `main.js` or `app.js`)
Make sure you're importing the main SCSS file into your app:

// main.js or app.js
import 'vuetify/styles';
import '@/styles/styles.scss'; // Your customized styles

—

With this setup, Vuetify will respect your custom typography and styling options. Let me know if you'd like me to adjust it further for dark theme, colors, or spacing!

User
[plugin:vite:css] [sass] Error: This variable was not declared with !default in the @used module.
╷
121 │ $btn-font-weight: $btn-font-weight !default,
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../../../src/scss/_variables.scss 121:3 @use
../../../../src/scss/style.scss 1:1 root stylesheet
Assistant
This error means that you're trying to override a Vuetify SCSS variable (`$btn-font-weight`) **which was not marked with `!default`** in the Vuetify source code. Sass's module system using `@use` and `@forward` is strict — you **can only override variables that were declared with `!default`** in the original file.

—

### 🔥 The root cause
In your `_variables.scss`, you have:

@forward 'vuetify/lib/styles/settings/_variables' with (
  $btn-font-weight: $btn-font-weight, // ❌ this causes the error
  ...
);

Vuetify’s internal `$btn-font-weight` variable is likely **not marked with `!default`**, so Sass throws an error when you try to override it.

—

### ✅ Solution

You have **two options** depending on what you need:

—

#### 🛠️ Option 1: **Remove the non-overridable variables**
Remove any variables in the `@forward … with (…)` block that aren’t declared with `!default` in Vuetify's source.

@forward 'vuetify/lib/styles/settings/_variables' with (
  $color-pack: $color-pack,
  $font-size-root: $font-size-root,
  $border-radius-root: $border-radius-root,
  $rounded: $rounded,
  $typography: $typography,
  $body-font-family: $body-font-family,
  $heading-font-family: $heading-font-family
  // 🚫 Remove $btn-font-weight and $btn-letter-spacing
);

If you're okay with not customizing `$btn-font-weight`, this is the cleanest fix.

—

#### ⚙️ Option 2: **Override using custom CSS**
If Vuetify doesn't expose `$btn-font-weight` as a configurable variable, you can override it via standard CSS instead:

.v-btn {
  font-weight: 400;
  letter-spacing: 0;
}

You can scope this override globally or use Vuetify classes or themes if needed.

—

### 💡 Bonus: Check Vuetify’s actual SCSS source

To verify what Vuetify allows overriding, look into:

node_modules/vuetify/lib/styles/settings/_variables.scss

Only variables declared like this can be overridden:

$btn-font-weight: 500 !default;

—

Let me know if you want to override specific button styles via theme configuration or via CSS utility classes — I can guide you based on your exact use case.

Leave a Comment

Your email address will not be published. Required fields are marked *