Vuetifyのスタイルを変更するSass変数メモ

Nuxt.jsのデザインフレームワークであるVuetifyを好んで使っています。
このフレームワークのCSSは、結合セレクタによる詳細度の強いCSSが初期設定されているため、良くも悪くも堅牢な設計だと思います。

そのため、複雑なレイアウトを組みたい時に難儀することもあります。もちろん初期設定のCSSを変更する手段が用意されています。ここではSass変数による設定変更についてメモしていきます。

準備

下記コードをnuxt.config.jsに記述します。

// nuxt.config.js

export default {
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true
  },
}

Sassファイル設置

Sass変数を上書きするためのファイルを設置します。
前述のnuxt.config.jsに記載に従い、assets/variables.scssのように置きます。

Sass変数

例として下記のように記述し変数を上書きします。

// Globals
$body-font-family: 'Work Sans', serif;
$border-radius-root: 6px;
$font-size-root: 14px;

$btn-font-weight: 400;
$list-item-title-font-size: 0.929rem;

$headings: (
  'h1': (
    'size': 3.3125rem,
    'line-height': 1.15em
  ),
  'h2': (
    'size': 2.25rem,
    'line-height': 1.5em
  )
);

Sass変数をドキュメントで調べる

こちらです。
Vuetifyはドキュメントがしっかりしていて、且つ日本語でも読めます。

ついつい!importantで上書きしたくなりますが、Sass変数で上書きできることが多いので（できない場合もある？）、手を抜かずドキュメントを読もうと自分も心がけます！