VuetifyにカスタムCSSを追加してSASS変数を理解しよう
  • 2021.12.28に公開
  • 2021.12.30に更新
  • ブログ構築TS
  • 2. Vuetifyセットアップ
  • No.2 / 3

今回達成すること

前回導入したVuetifyに、カスタムCSSを導入します。

2021-12-28 15-56-16

CSSファイルを置くassetsディレクトリ

Nuxtでは、CSSファイルをassetsディレクトリに置くよう設計されています。

assetsディレクトリには、CSSの他に画像やフォントを格納します。

assetsディレクトリには、StylusやSassファイル、画像、フォントなど、コンパイルされていないアセットが格納されています。

引用: Assets directory - Nuxt.js

VuetifyにカスタムCSSを導入する

assetsディレクトリ以下にVuetifyのカスタムCSSファイル、variables.scssを作成します。

ターミナルからコマンドを実行しましょう。

% mkdir assets/sass && touch $_/variables.scss

assetsディレクトリは以下の構成になります。

% tree assets 
assets
└── sass
    └── variables.scss

treeコマンドはHomebrew経由でインストールできます。

tree - Homebrew Formulae

VuetifyにカスタムCSSを読み込ませる

作成したvariables.scssをVuetifyに登録します。

nuxt.config.jsvuetifyプロパティを編集しましょう。

nxut.config.js
export default {
  vuetify: {
    // 追加
    // カスタムCSSファイルパス
    customVariables: ['~/assets/sass/variables.scss'],
    // treeShake: カスタムCSSを有効にするフラグ
    // Doc: https://vuetifyjs.com/en/features/sass-variables/#nuxt-install
    treeShake: true,
    theme: {
    ...
  },
}
  • customVariables ... Vuetifyに読み込ませるカスタムCSSファイルを指定する。
  • treeShake ... カスタムSASS変数が動作するために必要なフラグ。defaultはfalse

OK。これでVuetify カスタムCSSの準備は整いました。

Vuetifyを学ぶ

Vuetifyには、3つのSASS変数が用意されています。

  1. サイト全体に影響するもの
  2. テーマに影響するもの
  3. コンポーネントに影響するもの

1. グローバルSASS変数

サイト全体に影響するグローバルな変数を変更することが可能です。

assets/sass/variables.scss
$body-font-family: 'Roboto', sans-serif !default;
$font-size-root: 16px !default;
$line-height-root: 1.5 !default;
$border-radius-root: 4px !default;

グローバル SASS変数: _variables.scss - GitHub

2. テーマ単位のSASS変数

テーマ別に決められたSASS変数は、$material-<ligt or dark>内でSASS変数をカスタマイズします。

assets/sass/variables.scss
// Lightテーマ
$material-light: (
  'background': #ffffff
);

// Darkテーマ
$material-dark: (
  'background': #121212
);

Lightテーマ SASS変数: _light.scss - GitHub

Darkテーマ SASS:変数 _dark.scss - GitHub

3. コンポーネント単位のSASS変数

Vuetifyには、コンポーネント単位でカスタムSASS変数が用意されています。

Variable API - Vuetify こちらのフォームより検索可能です。

ボタンのフォントサイズのdefault値を、2remにしたい場合は以下のようにします。

assets/sass/variables.scss
$btn-font-sizes: (
  'default': 2rem
);
結果

2021-12-28 13-59-57

Vueファイル単位でVuetifyをカスタマイズしたい場合

.vueファイル内でVuetifyのSASS変数のカスタマイズは有効になりません。

pages/index.vue
<!-- NG フォントサイズは変わらない -->
<style lang="scss" scoped>
$btn-font-sizes: (
  'default': 2rem
);
</style>

カスタマイズしたい場合は、直接CSS classを上書きするのが良いでしょう。

VuetifyのStyleを直接変更する場合は、<style>タグにscopedプロパティを必ず付けてください。

他コンポーネントのStyleに影響が出る可能性があります。

<!-- scopedは必須!! -->
<style lang="scss" scoped>
.v-btn.v-size--default {
  font-size: 2rem;
}
</style>
  • scoped ... そのVueファイル内にしか影響しないCSSクラスを宣言する場合に使用する。

Vuetifyの変数をVueファイルで取得する

Vuetifyの変数ベースでCSSをカスタマイズしたい場合は、コンポーネントの_variables.scssをインポートします。

<template>
  <div
    class="btn-font-size"
  >
    これはボタンと同じフォントサイズです
  </div>
</template>

<style lang="scss" scoped>
@import '~vuetify/src/components/VBtn/_variables.scss';

.btn-font-size {
  font-size: map-get($btn-font-sizes, 'default')
}
</style>
  • map-get(変数, キー) ... 変数のキーを取得する。
結果

2021-12-28 15-26-22

この時の@importに渡すパスは、取得したいSASS変数のコンポーネント名を指定します。

@import '~vuetify/src/components/<コンポーネント名>/_variables.scss';

インポートした_variables.scssの実態はこのようになっています。

node_modules/vuetify/src/components/VBtn/_variables.scss
$btn-font-sizes: () !default;
$btn-font-sizes: map-deep-merge(
  (
    'x-small': .625rem,
    'small': .75rem,
    'default': .875rem,
    'large': .875rem,
    'x-large': 1rem
  ),
  $btn-font-sizes
);

VuetifyにカスタムCSSを追加しよう

それでは実装に戻ります。

作成したvariables.scssに、3つのカスタムCSSを追加しましょう。

  1. Lightテーマのバックグラウンドを変更
  2. ipad、mobileのオリジナルブレイクポイント追加
  3. オリジナルブレイクポイントで表示・非表示を切り返るCSSクラスの追加
assets/sass/variables.scss
/*
  Lightテーマカスタマイズ
  Code: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_light.scss
*/
$material-light: (
  'background': #f7f9fa
);

/*
  オリジナルブレイクポイントを追加する
  Code: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss#L41
*/
$grid-breakpoints: (
  'mobile': 426px,
  'ipad': 768px
);

/*
  独自のブレイクポイントで表示・非表示を切り替えるCSSクラスの追加
  Code: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss#L81

  ipad-and-down: 767以下, ipad-and-up: 768以上
  mobile-and-down: 425以下, ipad-and-up: 426以上
*/
$display-breakpoints: (
  'ipad-and-down':
  'only screen and (max-width: #{map-get($grid-breakpoints, 'ipad') - 1})',
  'ipad-and-up':
  'only screen and (min-width: #{map-get($grid-breakpoints, 'ipad')})',
  'mobile-and-down':
  'only screen and (max-width: #{map-get($grid-breakpoints, 'mobile') - 1})',
  'mobile-and-up':
  'only screen and (min-width: #{map-get($grid-breakpoints, 'mobile')})'
);

カスタムブレイクポイントクラスを確認する

追加したカスタムクラスをpages/index.vueから確認してみましょう。

pages/inde.vue
<template>
  ...
  <!-- 追加 -->
      <h2>
        VuetifyカスタムCSSのテスト
      </h2>
      <v-card
        v-for="(breakpoint, i) in breakpoints"
        :key="`breakpoint-${i}`"
        :color="breakpoint.color"
        :class="breakpoint.class"
      >
        {{ breakpoint.px }}pxで非表示
      </v-card>
    </v-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class IndexPage extends Vue {
  // 追加
  breakpoints: { class: string, px: number, color: string }[] = [
    { class: 'hidden-ipad-and-down', px: 767, color: 'primary' },
    { class: 'hidden-ipad-and-up', px: 768, color: 'error' },
    { class: 'hidden-mobile-and-down', px: 425, color: 'success' },
    { class: 'hidden-mobile-and-up', px: 426, color: 'warning' }
  ]
}
</script>

バックグラウンドカラーと、ウィンドウ幅で表示、非表示が切り替わるBOXが表示されることを確認してください。

2021-12-28 15-56-16

今回の実装は以上です。

% git add -A
% git commit -m "Add vuetify custom css" 
% git push

次回は ?

Vuetifyにオリジナルアイコンを追加します。

オリジナルのsvgアイコンを用意し、Vuetifyコンポーネントで自由に使えるように設定します。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。