1
votes

Variable non définie $ input-height-inner-quarter

Je souhaite utiliser un thème personnalisé dans la vue bootstrap de nuxt.js mais j'ai un problème lors de la compilation.

$input-height-inner-quarter undefined variable

 background-position: right $input-height-inner-quarter center;
                                ^
      Undefined variable: "$input-height-inner-quarter".
      in /node_modules/bootstrap-vue/src/components/form-input/_form-input.scss (line 10, column 34)

bootstrap-4 nuxt.js vuejs2 sass bootstrap-vue

0 commentaires

3 Réponses :

0
votes

Il semble que vous utilisez le SCSS (pas de CSS pré-compilé).

Assurez-vous de @import tous les fichiers @import dans un seul fichier SCSS qui est ensuite import dans votre projet.

Les importations séparées individuelles dans votre projet ne partageront pas les variables SCSS.

https://bootstrap-vue.js.org/docs/reference/theming

0 commentaires

0
votes

Entre Bootstrap 2.1 et Bootstrap 3.1, les noms de variables ont changé, si vous avez bootstrap comme dépendance dans votre package.json, il est peut-être obsolète!

0 commentaires

0
votes

importez d'abord les styles bootstrap styles.scss, puis les styles bootstrap-input-spinner comme indiqué dans l'exemple: codesandbox.io

@import '~bootstrap/scss/bootstrap';
@import '~@tkrotoff/bootstrap-input-spinner/src/bootstrap-input-spinner';

0 commentaires