web-dev-qa-db-fra.com

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

Je viens d'installer un nouveau Laravel 5.4 et bootstrap 4 alpha 6. Laravel le mélange ne sera pas compilé. SASS: 1 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 a passé ça? Et comment?

laravelwebpackbootstrap-4bootstrap-sass
23
Nicolae Casîr

Résolu

  1. supprimez l'entrée bootstrap de package.json et remplacez-la par "bootstrap": "4.0.0-alpha.6", dans resources/assets/sass/app.scss,
  2. commentez l'importation de variables. remplacez le chemin de bootstrap par @import "node_modules/bootstrap/scss/bootstrap.scss";
  3. dans resources/assets/js/bootstrap.js, recherchez require ('bootsrap-sass'); et changez-le pour exiger ('bootstrap');

Lien!

37
Nicolae Casîr

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

Pour résoudre ce problème, commentez cette ligne dans resources/assets/sass/_variables:

$ font-size-base: 14px;

Dans les variables si vous avez besoin, utilisez d’autres variables que laravel fournit.

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

17
Ivan Joaquim

Il suffit de changer le '$ font-size-base: 14px;' to '$ font-size-base: 0.875rem;' et lancez 'npm run dev'. Et fait.

4
BlackLotus

Je viens de corriger cela de mon côté, ce qui a bien fonctionné pour moi, c'est de déplacer le @import "bootstrap.scss .." et d'autres variables en haut du fichier app.scss.

1
Armin