laravel - node_modules - npm bootstrap 4

Unidades incompatibles: ''rem'' y ''px''-Bootstrap 4 y Laravel Mix

Question

Acabo de instalar una nueva versión de Laravel 5.4 y bootstrap 4 alpha 6. La mezcla de Laravel no compilará SASS: aquí hay un error:

    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

Alguien pasó esto? ¿Y cómo?

Answer 1

A mí también me pasó, es como dijiste, la anulación de algunas variables es la causa de este error.

Para solucionar esto, simplemente comente esta línea en recursos / activos / sass / _variables:

$ font-size-base: 14px;

En las variables, si es necesario, está utilizando otras variables que proporciona laravel.

referencia: https://github.com/twbs/bootstrap/issues/18368

Answer 2

Resuelto

1. elimine la entrada bootstrap de package.json y reemplácela con "bootstrap": "4.0.0-alpha.6", en resources / asset / sass / app.scss,
2. comentar la importación de variables. cambie la ruta de bootstrap a @import "node_modules / bootstrap / scss / bootstrap.scss";
3. en resources / asset / js / bootstrap.js, busque require (''bootsrap-sass''); y cambiarlo para que requiera (''bootstrap'');

Link!

Answer 3

Simplemente cambia el ''$ font-size-base: 14px;'' a ''$ font-size-base: 0.875rem;'' y ejecute ''npm run dev''. Y hecho.