Problem using latest bootstrap release with node-sass

[joterr]

• NPM version (6.5.0):
• Node version (v8.12.0):
• Node Process ({ http_parser: '2.8.0', node: '8.12.0', v8: '6.2.414.66', uv: '1.19.2', zlib: '1.2.11', ares: '1.10.1-DEV', modules: '57', nghttp2: '1.32.0', napi: '3', openssl: '1.0.2p', icu: '60.1', unicode: '10.0', cldr: '32.0', tz: '2017c' }):
• Node Platform (darwin):
• Node architecture (x64):
• node-sass version (node-sass 4.11.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++]):
• npm node-sass versions ( ANGULAR_SPA ├── [email protected] └─┬ [email protected] ├─┬ @angular-devkit/[email protected] │ └── [email protected] deduped └── [email protected] deduped):

Current Behavior

Sass-loader (angular/webpack) fails loading latest bootstrap release, see the following error:

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

I've segregated the following code from bootstrap to test with https://www.sassmeister.com - this was successful.

$line-height-base:            1.5 !default;
$input-btn-line-height:       $line-height-base !default;
$input-line-height:                     $input-btn-line-height !default;
$input-btn-padding-y:         .375rem !default;
$input-padding-y:                       $input-btn-padding-y !default;

$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;

.test-class {
  line-height: $input-height-inner-half;
}

[xzyfer]

The error is because the code is trying to multiply a rem and an em value. These are not compatible. The resulting value has the unit rem*em which isn't valid CSS. Make sure the variables being multiplied have the same unit.

…

On Tue., 12 Feb. 2019, 10:55 pm Jannik Rulitschka ***@***.*** wrote: - NPM version (6.5.0): - Node version (v8.12.0): - Node Process ({ http_parser: '2.8.0', node: '8.12.0', v8: '6.2.414.66', uv: '1.19.2', zlib: '1.2.11', ares: '1.10.1-DEV', modules: '57', nghttp2: '1.32.0', napi: '3', openssl: '1.0.2p', icu: '60.1', unicode: '10.0', cldr: '32.0', tz: '2017c' }): - Node Platform (darwin): - Node architecture (x64): - node-sass version (node-sass 4.11.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++]): - npm node-sass versions ( ANGULAR_SPA ├── ***@***.*** └─┬ ***@***.*** ├─┬ @***@***.*** │ └── ***@***.*** deduped └── ***@***.*** deduped): *Current Behavior* Sass-loader (angular/webpack) fails loading latest bootstrap release, see the following error: 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 I've segregated the following code from bootstrap to test with https://www.sassmeister.com - this was successful. `$line-height-base: 1.5 !default; $input-btn-line-height: $line-height-base !default; $input-line-height: $input-btn-line-height !default; $input-btn-padding-y: .375rem !default; $input-padding-y: $input-btn-padding-y !default; $input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default; .test-class { line-height: $input-height-inner-half; }` — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2596>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAjZWOXfDY43sdXpC5wixgEgGNTEZDaGks5vMqu-gaJpZM4a2O1H> .

[joterr]

The error was a custom variable in our own code (see twbs/bootstrap#28240). Thanks!