Unités incompatibles: "rem" et "px" - Bootstrap 4 et Laravel Mix

je viens d'installer un Laravel 5.4 frais, et bootstrap 4 alpha 6. Laravel mix ne compilera pas SASS: Ici est une erreur:

    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

Quelqu'un l'a passé? Et comment?

22
demandé sur Nicolae Casîr 2017-04-24 17:28:01

3 réponses

Résolu

  1. supprimer l'entrée bootstrap du paquet.JSON et le remplacer par "bootstrap": "4.0.0-alpha.6", dans ressources/actifs/sass/app.scss,
  2. commentez l'importation des variables. changer le chemin de bootstrap en @import " node_modules/bootstrap/scss / bootstrap.scss";
  3. dans resources/assets/js / bootstrap.js, cherche require ('bootsrap-sass')); et de le modifier pour require('bootstrap');

Lien!

32
répondu Nicolae Casîr 2017-04-24 20:17:47

Il m'est arrivé aussi, c'est comme vous l'avez dit, le remplacement de certaines variables est la cause de cette erreur.

pour corriger cela, il suffit de commenter cette ligne dans resources/assets/sass / _variables:

$font-size: 14px;

dans les variables Si vous avez besoin utilisent d'autres variables que laravel fournit.

référence: https://github.com/twbs/bootstrap/issues/18368

16
répondu Ivan Joaquim 2017-07-18 17:51:26

il suffit de changer le "$font-size: 14px; " à "$taille de police de base: de 0,875 rem; "et lancer" npm exécuter des dev'. Et de fait.

0
répondu Jwei Wei 2018-09-17 08:07:46