不兼容的单位：'rem' 和 'px' - Bootstrap 4 和 Laravel Mix。

Question

我刚刚安装了全新的 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

有人通过了这个？怎么做到的？

- Nicolae Casîr

Answer 1

已解决

1. 从package.json中删除bootstrap条目，并将其替换为"bootstrap": "4.0.0-alpha.6"，在resources/assets/sass/app.scss中。
2. 注释掉变量的导入，将bootstrap路径更改为@import "node_modules/bootstrap/scss/bootstrap.scss";
3. 在resources/assets/js/bootstrap.js中，查找require('bootsrap-sass');并将其更改为require('bootstrap');

链接！

- Nicolae Casîr

---

жҳҜзҡ„пјҢзңӢиө·жқҘLaravelжҸҗдҫӣзҡ„resources/assets/sass/_variablesе’ҢBootstrap v4 a6йҷ„еёҰзҡ„еҸҳйҮҸд№Ӣй—ҙеӯҳеңЁеҶІзӘҒгҖӮе°ҶLaravelзҡ„еҸҳйҮҸжіЁйҮҠжҺүеҸҜд»Ҙи§ЈеҶіиҝҷдёӘй—®йўҳгҖӮ - E. Marshall

Answer 2

我也遇到过这个问题，就像你说的一样，某些变量的覆盖是导致这个错误的原因。

要解决这个问题，只需要在 resources/assets/sass/_variables 文件中注释掉这一行：

$font-size-base: 14px;

如果您需要使用其他由 Laravel 提供的变量，请在变量中使用它们。

参考：https://github.com/twbs/bootstrap/issues/18368

- Ivan Joaquim

---

对我而言，只需要将 14px 改成 1rem 就可以解决这个问题了。 - ElmerCat

我今天下载了Bootstrap 4，但仍然遇到以下问题： $input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; ^ 不兼容的单位：'rem' 和 'px*px'。 其中$font-size-base为1rem。 - blomster

我今天下载了Bootstrap 4，但仍然遇到以下问题：$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; ^ 不兼容的单位：'rem'和'px*px'。其中，$font-size-base为1rem， $input-btn-line-height为1.5（我尝试将其更改为1.5rem）， $input-btn-padding-y为0.375rem。 - blomster

Answer 3

只需要将 $font-size-base: 14px; 修改为 $font-size-base: 0.875rem;

然后运行 npm run dev

- BlackLotus

Answer 4

我刚刚在我的代码中解决了这个问题，我的方法是将@import "bootstrap.scss.." 和其他变量移到 app.scss 文件的顶部，看起来它们被覆盖了，导致了问题。

- Armin