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

Question

我刚刚安装了新的Laravel 5.4，并引导了4 alpha6。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

有人通过了吗？以及如何？

Answer 1

已解决

从package.json中删除引导项，并将其替换为“ bootstrap”：“ 4.0.0-alpha.6”，在资源/资产/sass/app.scss中，
1. 注释掉变量的导入。将引导程序的路径更改为@import“ node_modules / bootstrap / scss / bootstrap.scss”;
2. 在resources / assets / js / bootstrap.js中，查找require（'bootsrap-sass'）;并将其更改为require（'bootstrap'）;

Link!

Answer 2

也发生在我身上，就像您说的那样，某些变量的覆盖是导致此错误的原因。

要解决此问题，只需在资源/资产/ ass / _variables中注释此行：

$ font-size-base：14px;

在变量中，如果需要，请使用laravel提供的其他变量。

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

Answer 3

只需更改$font-size-base: 14px;至$font-size-base: 0.875rem;

并运行npm run dev

Answer 4

我只是将其固定在一边，对我有用的是将@import“ bootstrap.scss ..”和其他变量移动到app.scss文件的顶部，似乎它被覆盖了，这就是导致问题。