素肌にサスペンダー

個人的な備忘と日記

【Vuetify】Nuxt.jsのCSSでVuetifyのcolor変数を読み込む方法

nuxt.config.jsのVuetify > optionsにcustomProperties: trueを追記する。

  • nuxt.congif.js
  ...
  vuetify: {
      ....
      options: {
        customProperties: true
      }
    },
  },
  ...

CSSに、var(--v-primary-base)のように記述すれば、変数を利用できる。

background: var(--v-primary-base);

※単一ファイルコンポーネント(style内、template内にインライン指定とか)でも、assetsフォルダとかに入れる個別のscssファイル内のいずれからも呼び出せる。


--v-primary-base以外にどんな変数があるの?ってcolor変数の一覧を見たい時は、

Google Chromeデベロッパーツールで、<body>タグを確認すれば、どんな色かも併せてチェックできるので便利。

f:id:bnsgt:20211015194150p:plain