4

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!

Neon_10
  • 711
  • 2
  • 7
  • 19

3 Answers3

8

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

Juan Carlos Pulido Suarez
  • 114
  • 1
  • 5
4

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!

paberlance
  • 41
  • 2
  • 1
    I think a better solution would be to edit the contents of ``resources/assets/sass/_variables.scss`` rather than importing (the already imported) ``node_modules/bootstrap/scss/_variables.scss`` file. – SameOldNick Dec 24 '17 at 04:08
0

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.

contrid
  • 950
  • 9
  • 18