不兼容的单位：'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

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

对于Bootstrap4，只需删除
中3.3.X变量文件的导入
resouces/assets/sass/app.scss

并替换

// Variables @import "variables";

和

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

希望对您有所帮助！

Answer 2

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

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

$font-size-base: 14px; 与 $font-size-base: 1rem;

一般来说，Bootstrap4使用'rem'代替'px'。作为参考，请查看 https://github.com/twbs/bootstrap/issues/17070

Answer 3

$font-size-base变量在最新的Bootstrap4.1.3.

中已经是1rem

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

由于 Bootstrap 使用 rem 作为全局测量单位，您只需将 $font-size-base 设置为 1（删除 rem 部分）并且允许您毫无问题地编译 SASS。它似乎也工作正常，因为使用 $font-size-base 的计算最终指定 rem。

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

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

不兼容的单位：'rem' 和 'px' 与 bootstrap 4 alpha 6

Incompatible units: 'rem' and 'px' with bootstrap 4 alpha 6

css

sass

bootstrap-4

incompatibletypeerror