Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix

laravel webpack bootstrap-4 bootstrap-sass
Nicolae Casîr picture Nicolae Casîr · Apr 24, 2017 · Viewed 35.1k times · Source

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?

Answer

Nicolae Cas&#238;r picture Nicolae Casîr · Apr 24, 2017

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!

Related questions

How to Install Font Awesome in Laravel Mix

I've tried to install Font Awesome using Laravel Mix but when executing run npm dev I get the following message: ERROR Failed to compile with 1 errors error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the …

Read More
Block-scoped declarations not yet supported outside strict mode

I'm running Laravel 5.4 on my Homestead vagrant box. I've installed all the npm dependencies with npm install command. That didn't produce any errors. In my webpack.min.js file I have: const { mix } = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | …

Read More
Laravel 5 WebPack JQuery - $ is not defined

I Have webpack.min.js: mix.webpackConfig(webpack => { return { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], }) ] }; }); mix.sass('resources/assets/styles/index.scss', 'public/css/app.css') .js('resources/assets/scripts/index.…

Read More