ホーム > Laravel > LaravelのVite、VuetifyでSASS変数を変更する方法
Laravel

LaravelのVite、VuetifyでSASS変数を変更する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. これからやること
  2. まずは変数を変えなくても良い方法を探る
  3. コンポーネントの固有の変数を変更する方法
  4. おわりに
PR

Laravel の Vite、Vuetify で SASS 変数を変更する方法についてまとめました。

これからやること

Vuetify には、あらかじめ SASS によってスタイルが変数で定義されています。

例えば、v-btn を使えばデフォルトで

$button-height: 36px;

が高さとして適用されます。

このデフォルトの変数を例えば 40px に変更する方法を今回はやっていきます。

まずは変数を変えなくても良い方法を探る

Vuetify はカスタマイズを助けてくれる props を多く用意してくれています。

今回の例の v-btn だと、height という props を与えると変更することができます。

<v-btn height="100">テスト</v-btn>

なので変数を変えるパターンというのは、全体的なレイアウト調整で使うようにするべきだと思います。

コンポーネントの固有の変数を変更する方法

コマンド

npm install -D vite-plugin-vuetify
npm install -D sass-embedded

resources/js/app.js

//追記したimport
import "@mdi/font/css/materialdesignicons.css"
import "vuetify/styles"
import { createVuetify } from "vuetify"

// ~~~
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .use(vuetify) // ← 追記
            .mount(el);

vite.config.js

//importに追記
import vuetify from "vite-plugin-vuetify"

//プラグインに追記
export default defineConfig({
  plugins: [
    //~~
    vuetify({
      autoImport: true,
      styles: {
        configFile: "resources/scss/settings.scss",
      },
    }),
  ],
})

resources/scss/settings.scss を作成する

@use "vuetify/settings" with (
  $button-height: 40px
);

ビルドする

npm run dev

これで、変数が変更されました。

おわりに

Vuetify のコンポーネントページの API には、SASS 変数という項目があります。

今回はこの変数を書き換える方法について Laravel の Vite でやってみました。

参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。