Bootstrap theme does not work with [email protected]

[altso]

Current behavior

@progress/[email protected] does not work along with [email protected]. I get a compilation error:

> ng build

Date: 2018-12-28T18:29:52.304Z
Hash: 55b11cdf650097cd5ced
Time: 43559ms
chunk {main} main.js, main.js.map (main) 8.53 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.11 MB [initial] [rendered]

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
           ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in C:\Temp\ankenboot\node_modules\@progress\kendo-theme-bootstrap\scss\menu\_theme.scss (line 2, column 13)

Expected behavior

ng build completes successfully without any errors

Minimal reproduction of the problem with instructions

Please see repo here: https://github.com/altso/ankenboot

What is the motivation or use case for changing the behavior?

To have an ability to stay on the latest version of bootstrap.

Environment

Product:

• Kendo Ui for Angular

Package versions:

+-- @angular-devkit/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Browser:
N/A

System:

• TypeScript version: 2.7.2
• Node version: v10.13.0 (6.5.0)
• Platform: Windows

The same code works just fine with [email protected]

[merobal]

This is the error message with "@progress/kendo-theme-bootstrap": "3.0.0" and "bootstrap": "4.2.1" (latest Angular stack) on ng serve:

$menu-text: rgba( $header-text, .5 ) !default;
           ^
      Argument `$color` of `rgba($color, $alpha)` must be a color
      in /mnt/c/Github/[project_name]/node_modules/@progress/kendo-theme-bootstrap/scss/menu/_theme.scss (line 2, column 13)

(And works good with "bootstrap": "4.1.3")

[merobal]

It's still an issue with "@progress/kendo-theme-bootstrap": "3.1.0", same error message.

[merobal]

This issue maybe introduced by twbs/bootstrap#27681 via this line: twbs/bootstrap@303121f#diff-d8ee409a461718bfb6240710c8c73382R798

[joneff]

fixed by twbs/bootstrap@5adcfe9. Note: you don't need to update kendo-theme-bootstrap. Just bootstrap.