30

I just installed a fresh Laravel 5.4, and bootstrap 4 alpha 6. Laravel mix wont compile SASS: Here is one error:

    Module build failed: ModuleBuildError: Module build failed: 
$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
                                ^
      Incompatible units: 'rem' and 'px'.
      in /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/bootstrap/scss/_variables.scss (line 444, column 34)
    at runLoaders (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/webpack/lib/NormalModule.js:192:19)
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/lib/loader.js:57:13)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:2262:31)
    at apply (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
    at Object.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:944:16)
    at options.error (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/node-sass/lib/index.js:294:32)

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Someone passed this? And how?

Nicolae Casîr
  • 892
  • 1
  • 10
  • 18

4 Answers4

40

Solved

  1. remove the bootstrap entry from package.json and replace it with "bootstrap": "4.0.0-alpha.6", in resources/assets/sass/app.scss,
  2. comment out the import of variables. change the path of bootstrap to @import "node_modules/bootstrap/scss/bootstrap.scss";
  3. in resources/assets/js/bootstrap.js, look for require('bootsrap-sass'); and change it to require('bootstrap');

Link!

Nicolae Casîr
  • 892
  • 1
  • 10
  • 18
  • 7
    Yes, looks like there's a conflict between the Laravel-provided `resources/assets/sass/_variables` and the variables shipped with Bootstrap v4 a6. Commenting out Laravel's variables fixed this. – E. Marshall Jun 29 '17 at 21:34
23

It happened to me too, it's like you said, the override of some variables is the cause of this error.

To fix this just comment this line in resources/assets/sass/_variables:

$font-size-base: 14px;

In the variables if you need are using other variables that laravel provides.

reference: https://github.com/twbs/bootstrap/issues/18368

Ivan Joaquim
  • 339
  • 2
  • 8
  • 7
    You could also simply change `14px` to `1rem` — that fixed it for me. – ElmerCat Aug 07 '17 at 22:39
  • 2
    I've downloaded bootstrap 4 today, and am still getting this issue $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; ^ Incompatible units: 'rem' and 'px*px'. $font-size-base is 1rem – blomster Feb 13 '18 at 15:39
  • 1
    I've downloaded bootstrap 4 today, and am still getting this issue : $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; ^ Incompatible units: 'rem' and 'px*px'. $font-size-base is 1rem $input-btn-line-height is 1.5 (which I've tried changing to 1.5rem) $input-btn-padding-y is 0.375rem – blomster Feb 13 '18 at 15:53
9

Just change the $font-size-base: 14px; to $font-size-base: 0.875rem;

and run npm run dev

BlackLotus
  • 496
  • 2
  • 9
  • 24
8

I just fixed this on my side, what worked for me was moving the @import "bootstrap.scss.." and other variables to the top of the app.scss file, it seems it was overwritten and that is what caused the issue.

Armin
  • 2,021
  • 2
  • 19
  • 17