以下の内容はhttps://bnsgt.hatenablog.com/entry/2021/10/15/194518より取得しました。


【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




以上の内容はhttps://bnsgt.hatenablog.com/entry/2021/10/15/194518より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14