[Vuetify]v-containerのmax-widthを変える

2020-12-16IT記事,VueVuetify

v-containerのmax-widthを変えたくなった。

公式ドキュメントhttps://vuetifyjs.com/en/features/sass-variables/#variable-api

vuetifyではvue cliでインストールしておいた場合、自動でsrc/sass/variables.scss(またはsrc/styles/variables.scss)を読み込み、変数の値を上書きしてくれる。

上書きできる変数は上記リンク先から検索できる。container-max-widthsは$vuetifyの中にあった。

なのでsrc/sass/variables.scssというファイルを作る。そして以下を書くと幅が変わった。

$container-max-widths: (
  'md': 720px,
  'lg': 960px,
  'xl': 1140px,
);

公式ドキュメントにも書いてあるが、初回コンパイルがすごく遅くなる。