web-dev-qa-db-fra.com

Comment changer les points d'arrêt dans le scss dans vuetify v2?

J'utilise des fichiers scss et je veux changer les points d'arrêt dans le côté css dans vuetify v2.

Je ne trouve aucune référence dans le guide de mise à niveau vuetify pour cela.

Dans la version 1.5, j'ai fait 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';

Et puis j'importe le fichier:

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

Alors regardez la documentation: https://vuetifyjs.com/en/customization/sass-variables/#vue-cli-install , il dit:

Une fois installé, créez un dossier appelé sass, scss ou styles dans votre répertoire src avec un fichier nommé variables.scss ou variables.sass

Autrement dit, après avoir créé le projet à l'aide de CLI CLI , nous avons manuellement:

  1. Créez le nouveau dossier sass dans notre dossier src .
  2. Ensuite, dans notre nouveau dossier sass , créez le nouveau variables.scss fichier.
  3. Ensuite, dans notre nouveau fichier variables.scss , écrivez ces lignes, ce sont les paramètres standard pour bootstrap-4:

*

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
  1. Redémarrez maintenant npm run serve et vous êtes prêt. Vous pouvez remplacer les valeurs de la variable $ grid-breakpoints par les vôtres.
1
Alexandr Kazakov