CODEWITHSUNDEEP
csssassbootstrap-4incompatibletypeerror
Neon_10
Neon_10

Reputation: 731

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

I am trying to implement a bootstrap 4 template (I use bootstrap 4 alpha 6) and see such an error:

Incompatible units: 'rem' and 'px'.

in line 

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

Did somebody experience similar issue? Thanks!

Upvotes: 4

Views: 12435

Answers (3)

contrid
contrid

Reputation: 980

The $font-size-base variable is already 1rem in the latest Bootstrap 4.1.3.

The problem is definitely with the $font-size-base variable though.

Since Bootstrap uses rem as unit of measurement globally you can just set the $font-size-base to 1 (removing the rem part) and that allows you to compile your SASS without problems. It seems to be working fine as well since the calculations using $font-size-base specify rem eventually.

I might be wrong but this is what worked for me, hopefully it will help someone else.

This way you can import your custom variables without problems.

Upvotes: 0

Juan Carlos Pulido Suarez
Juan Carlos Pulido Suarez

Reputation: 124

Bootstrap moved from pixels (px) in version 3 to rem in version 4.

In resources/assets/sass/_variables.scss replace:

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

In general, Bootstrap 4 uses 'rem' instead of 'px'. For reference, look at https://github.com/twbs/bootstrap/issues/17070

Upvotes: 8

paberlance
paberlance

Reputation: 41

This happens, as Laravel 5.4 by default uses a variables.scss compatible with the 3.3.X version of Bootstrap.

For Bootstrap 4, just remove the import of the 3.3.X variables file in

resouces/assets/sass/app.scss

and replace

// Variables
@import "variables";

with 

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

Hope that helps!

Upvotes: 4

Related Questions