[英]Incompatible units: 'rem' and 'px' - Bootstrap 4 and Laravel Mix
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 混合不会编译 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?
如何?
Solved解决了
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:要解决此问题,只需在资源/资产/sass/_variables 中注释此行:
$font-size-base: 14px; $font-size-base: 14px;
In the variables if you need are using other variables that laravel provides.如果需要,在变量中使用 laravel 提供的其他变量。
reference: https://github.com/twbs/bootstrap/issues/18368参考: https ://github.com/twbs/bootstrap/issues/18368
Just change the $font-size-base: 14px;
只需更改
$font-size-base: 14px;
to $font-size-base: 0.875rem;
到
$font-size-base: 0.875rem;
and run npm run dev
并运行
npm run dev
我刚刚解决了这个问题,对我有用的是将 @import "bootstrap.scss.." 和其他变量移动到 app.scss 文件的顶部,它似乎被覆盖了,这就是导致问题的原因。
Just incase someone will land on this error ever again, another solution that worked for me is ( specifically for react ):万一有人会再次遇到这个错误,另一个对我有用的解决方案是(专门针对 react ):
Head over to your node_modules folder, under node_modules > bootstrap > scss > _variables.scss, change the value of that variable, say modal-footer-margin-between from rem to it's corresponding px value.转到您的 node_modules 文件夹,在 node_modules > bootstrap > scss > _variables.scss 下,更改该变量的值,例如modal-footer-margin-between从rem到它对应的px值。
At least that worked for me至少这对我有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.