不兼容的单位：'rem' 和 'px' - Bootstrap 4 和 Laravel Mix
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43590808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix
提问by Nicolae Cas?r
I just installed a fresh Laravel 5.4, and bootstrap 4 alpha 6. Laravel mix wont compile SASS: Here is one error:
我刚刚安装了一个新的 Laravel 5.4 和 bootstrap 4 alpha 6。Laravel mix 不会编译 SASS：这是一个错误：
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?
有人通过了这个？如何？
回答by Nicolae Cas?r
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');
- 从 package.json 中删除 bootstrap 条目并将其替换为 "bootstrap": "4.0.0-alpha.6", in resources/assets/sass/app.scss,
- 注释掉变量的导入。将bootstrap的路径改为@import "node_modules/bootstrap/scss/bootstrap.scss"；
- 在 resources/assets/js/bootstrap.js 中，查找 require('bootsrap-sass'); 并将其更改为 require('bootstrap');
回答by Ivan Joaquim
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:
要解决这个问题，只需在 resources/assets/sass/_variables 中注释这一行：
$font-size-base: 14px;
$font-size-base: 14px;
In the variables if you need are using other variables that laravel provides.
在变量中，如果您需要使用 laravel 提供的其他变量。
回答by BlackLotus
Just change the
$font-size-base: 14px;to
$font-size-base: 0.875rem;
只需更改
$font-size-base: 14px;为
$font-size-base: 0.875rem;
and run
npm run dev
并运行
npm run dev
回答by Armin
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.
我只是在我这边解决了这个问题，对我有用的是将@import“bootstrap.scss..”和其他变量移动到 app.scss 文件的顶部，它似乎被覆盖了，这就是导致问题的原因。
