不兼容的单位：'rem'和'px'，带有bootstrap 4 alpha 6

Question

我正在尝试实现一个bootstrap 4模板（我使用bootstrap 4 alpha 6）并看到这样的错误：

Incompatible units: 'rem' and 'px'.

在行

$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;

有人遇到过类似的问题吗？ 谢谢！

Answer 1

Bootstrap从版本3中的像素（px）移动到版本4中的rem。

在resources/assets/sass/_variables.scss替换：

带有$font-size-base: 14px;

的

$font-size-base: 1rem;

一般来说，Bootstrap 4使用＆＃39; rem＆＃39;而不是＆＃39; px＆＃39;。如需参考，请查看https://github.com/twbs/bootstrap/issues/17070

Answer 2

这种情况发生了，因为Laravel 5.4默认使用与 3.3.X 版本的Bootstrap兼容的 variables.scss 。

对于Bootstrap 4，只需删除

中3.3.X变量文件的导入

resouces / assets / sass / app.scss

并替换

// Variables
@import "variables";

带

// Variables
@import "~bootstrap/scss/variables";

希望有所帮助！

Answer 3

在最新的Bootstrap 4.1.3中，$font-size-base变量已经为1rem。

问题肯定出在$font-size-base变量上。

由于Bootstrap全局使用rem作为度量单位，因此您只需将$font-size-base设置为1（除去rem部分），就可以编译SASS没有什么问题。由于使用$font-size-base的计算最终指定了rem，因此似乎也可以正常工作。

我可能错了，但这对我有用，希望对其他人有帮助。

这样，您可以毫无问题地导入自定义变量。