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

1 Answer 96 Views

General Discussions Styling

Nitesh asked on 15 Feb 2024, 06:29 PM

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

commented on 22 Jun 2024, 04:07 PM

I have exactly this issue

1 Answer, 1 is accepted

answered on 26 Jun 2024, 11:23 AM

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:

I hope the provided information is helpful.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

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

1 Answer, 1 is accepted