Getting SassError: $color: null is not a color.

[Nitesh]

I am getting SassError while importing kendo-theme-bootstrap. I am trying with: 

@import '../../../../../node_modules/@progress/kendo-theme-bootstrap/scss/grid/index';

 

Below is the error:

./projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null is not a color.
    ╷
185 │     "r": red($color),
    │          ^^^^^^^^^^^
    ╵
  node_modules/@progress/kendo-theme-bootstrap/modules/bootstrap/scss/_functions.scss 185:10                                  luminance()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/functions/_colors.scss 416:12  contrast-wcag()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 75:24            @content
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/core/mixins/_import-once.scss 12:9  exports()
  node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/button/_theme.scss 1:1              @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_theme.scss 1:9                                                    @import
  node_modules/@progress/kendo-theme-bootstrap/scss/button/_index.scss 15:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/toolbar/_index.scss 6:9                                                   @import
  node_modules/@progress/kendo-theme-bootstrap/scss/adaptive/_index.scss 9:9                                                  @import
  node_modules/@progress/kendo-theme-bootstrap/scss/grid/_index.scss 6:9                                                      @import
  projects/lib/src/lib/app-theme/kendo.scss 37:9                                                                              @import
  projects/admin/src/app/shared/layout/wrapper/wrapper.component.scss 6:9                                                     root stylesheet



** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **

[Sebastian]

I have exactly this issue

[Zornitsa]

Hi,

Thank you for the provided details.

What I can suggest as a possible approach for overcoming the experienced error is to modify the @import statement in the following way:

@import "@progress/kendo-theme-bootstrap/scss/grid/_index.scss";

Alternatively, what could also be done is trying to import the styles for all available components, instead of only for the Grid component, to see if that would resolve the issue:

@import "@progress/kendo-theme-bootstrap/dist/all.scss";

Below I am linking some articles from our documentation that contain more details regarding importing the Kendo Themes styles and could be helpful for this scenario:

• https://www.telerik.com/kendo-angular-ui/components/styling/#toc-importing-specific-component-styles 
• https://www.telerik.com/kendo-angular-ui/components/styling/#toc-importing-all-components-styles 

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik