以下を参考に。
<div class="link-card">
<div class="link-card-header">
<img src="https://vuetifyjs.com/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">Vuetify</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">SASS variables — Vuetify</p>
</div>
<div class="link-card-description">
Customize Vuetify's internal styles by modifying SASS variables.
</div>
</div>
<img src="https://cdn.vuetifyjs.com/docs/images/graphics/og-image.png" class="link-card-image" />
</div>
<a href="https://vuetifyjs.com/en/features/sass-variables/#installation"></a>
</div>
## [[Sass]]のインストール
```console
npm i -D sass
```
## [[Tree-shaking]]の環境構築
[[Tree-shaking]]の機構が必要らしいのでやる。
<div class="link-card">
<div class="link-card-header">
<img src="https://vuetifyjs.com/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">Vuetify</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Treeshaking — Vuetify</p>
</div>
<div class="link-card-description">
Vuetify provides automatic treeshaking via the vuetify-loader. Use only the features that you need a...
</div>
</div>
<img src="https://cdn.vuetifyjs.com/docs/images/graphics/og-image.png" class="link-card-image" />
</div>
<a href="https://vuetifyjs.com/en/features/treeshaking/"></a>
</div>
### ドキュメントに記載されていたけど設定済だったこと
[[vite-plugin-vuetify]]をインストールする。
```console
npm i -D vite-plugin-vuetify
```
`nuxt.config.ts`に以下の内容を追加する。
```ts
import vuetify from 'vite-plugin-vuetify'
export default defineNuxtConfig({
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', config => config.plugins.push(
vuetify()
))
},
],
})
```
### コンポーネントの[[SCSS]]ファイルを追加
`src/styles/settings.scss`を追加。
```scss
@use 'vuetify/settings' with (
$button-height: 40px,
);
```