web-dev-qa-db-ja.com

vuetify v2のscssのブレークポイントを変更するにはどうすればよいですか？

私はscssファイルを使用していて、vuetify v2のcss側のブレークポイントを変更したいと思います。

このためのVuetifyアップグレードガイドに参照が見つかりません。

バージョン1.5では、style-x.stylを実行しました。

$grid-breakpoints := {
  xs: 0
  sm: 476px
  md: 668px
  lg: 1000px
  xl: 1300px
}
@import '~vuetify/src/styles/styles.sass';

$material-light.background = #f5f5f5;

@import '~vuetify/src/stylus/main';

次に、ファイルをインポートします。

import '../style-x.styl';
...
Vue.use(Vuetify);
...
cssvue.jssassvuetify.js
6
Jon Sud

だから、ドキュメントを見てください： https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install 、それは言う：

インストールしたら、src、scss、またはstylesという名前のフォルダーを、variables.scssまたはvariables.sassという名前のファイルを使用してsrcディレクトリに作成します。

つまり、Vue CLIを使用してプロジェクトを作成した後、手動で次のようにします。

  1. srcフォルダーに新しいsassフォルダーを作成します。
  2. 次に、新しいsassフォルダーで、新しいvariables.scssを作成しますファイル。
  3. 次に、新しいvariables.scssファイルに次の行を書き込みます。これらはbootstrap-4の標準設定です。

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
  1. ここでnpmを再起動してserveを実行すると、準備が整います。 $ grid-breakpoints変数の値を独自のものに変更できます。
1
Alexandr Kazakov