web-dev-qa-db-ja.com

互換性のないユニット： 'rem'と 'px'-Bootstrap 4 and Laravel Mix

新鮮な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

誰か合格した？そしてどうやって？

laravelwebpackbootstrap-4bootstrap-sass
23
Nicolae Casîr

解決済み

  1. package.jsonからbootstrapエントリを削除し、resources/assets/sass/app.scssの "bootstrap"： "4.0.0-alpha.6"に置き換えます。
  2. 変数のインポートをコメントアウトします。 bootstrapのパスを@import "node_modules/bootstrap/scss/bootstrap.scss"に変更します。
  3. resources/assets/js/bootstrap.jsでrequire（ 'bootsrap-sass'）;を探します。そしてrequire（ 'bootstrap'）に変更します;

リンク！

37
Nicolae Casîr

それは私にも起こりました。あなたが言ったように、いくつかの変数のオーバーライドがこのエラーの原因です。

これを修正するには、resources/assets/sass/_variablesでこの行をコメントしてください：

$ font-size-base：14px;

必要な場合は、変数でlaravelが提供する他の変数を使用しています。

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

17
Ivan Joaquim

「$ font-size-base：14px;」を変更するだけです「$ font-size-base：0.875rem;」へ「npm run dev」を実行します。できました。

4
BlackLotus

私はこれを自分の側で修正しましたが、私のために働いたのは@import "bootstrap.scss .."および他の変数をapp.scssファイルの先頭に移動することでした。上書きされたようで、それが問題の原因です。

1
Armin