问题
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?
回答1:
Solved
- remove the bootstrap entry from package.json and replace it with "bootstrap": "4.0.0-alpha.6", in resources/assets/sass/app.scss,
- comment out the import of variables. change the path of bootstrap to @import "node_modules/bootstrap/scss/bootstrap.scss";
- in resources/assets/js/bootstrap.js, look for require('bootsrap-sass'); and change it to require('bootstrap');
Link!
回答2:
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
回答3:
Just change the '$font-size-base: 14px;' to '$font-size-base: 0.875rem;' and run 'npm run dev'. And done.
回答4:
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.
来源:https://stackoverflow.com/questions/43590808/incompatible-units-rem-and-px-bootstrap-4-and-laravel-mix