$ input-height-inner-quarter内部未定义变量

Question

我想在nuxt.js引导程序vue中使用自定义主题，但是在编译时遇到问题。

$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)

Answer 1

您似乎正在使用SCSS（不是预编译的CSS）。

确保将所有SCSS文件@import import放入项目中。

单独导入到您的项目中不会共享SCSS变量。

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

Answer 2

Bootstrap 2.1和Bootstrap 3.1之间的变量名已更改，如果您将package.json中的引导程序作为依赖项，它可能已经过时了！

Answer 3

首先导入您的styles.scss引导程序样式，然后导入bootstrap-input-spinner样式，如示例所示：codesandbox.io

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