Bootstrap: Problem using sass-loader (webpack) with latest bootstrap release

Created on 12 Feb 2019  路  3Comments  路  Source: twbs/bootstrap

Current behavior
Webpack fails loading sass files with latest sass-loader.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./src/styles.scss Module build failed: $input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; ^ 0.625em*rem isn't a valid CSS value. in .../node_modules/bootstrap/scss/_variables.scss (line 492, column 97) @ ./src/styles.scss 4:14-268 @ multi ./src/styles.scss

Background
macOS
Angular
sass v1.17.0 (Sass 3.5.3 (Bleeding Edge))
sass-loader v7.1.0
node-sass v4.11.0

Most helpful comment

@joterr & @csaeum,

Did you set $line-height-base, $input-btn-line-height or $input-line-height in rem? This should be set without unit.

All 3 comments

Same Problem here with the New Realease

Fatal error: Exception: parse error: failed at &} { /home/xx/site/templates/sass/mixins/_badge.scss on line 5 (in /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Parser.php line 128) #0 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Parser.php(169): Leafo\ScssPhp\Parser->throwParseError() #1 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(3448): Leafo\ScssPhp\Parser->parse('@mixin badge-va...') #2 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1530): Leafo\ScssPhp\Compiler->importFile('/home/frawanbd/...', Object(Leafo\ScssPhp\Formatter\OutputBlock)) #3 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1592): Leafo\ScssPhp\Compiler->compileImport(Array, Object(Leafo\ScssPhp\Formatter\OutputBlock)) #4 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1335): Leafo\S in /home/xx/index.php on line 64

Fehler: Exception: parse error: failed at &} { /home/xx/site/templates/sass/mixins/_badge.scss on line 5 (in /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Parser.php line 128)

0 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Parser.php(169): Leafo\ScssPhp\Parser->throwParseError()

1 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(3448): Leafo\ScssPhp\Parser->parse('@mixin badge-va...')

2 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1530): Leafo\ScssPhp\Compiler->importFile('/home/frawanbd/...', Object(Leafo\ScssPhp\Formatter\OutputBlock))

3 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1592): Leafo\ScssPhp\Compiler->compileImport(Array, Object(Leafo\ScssPhp\Formatter\OutputBlock))

4 /home/xx/site/modules/Sassify/vendor/leafo/scssphp/src/Compiler.php(1335): Leafo\S

Diese Fehlermeldung wurde angezeigt wegen: Site ist im Debug-Modus. ($config->debug = true; => /site/config.php). Fehler wurde protokolliert.

@joterr & @csaeum,

Did you set $line-height-base, $input-btn-line-height or $input-line-height in rem? This should be set without unit.

That's it! Based on the error message I have not thought about own variables. Thanks!

Was this page helpful?
0 / 5 - 0 ratings