Large number of Deprecation messages in Scss

Posted by: ken.foskey on 16 November 2025, 8:31 pm EST

  • Posted 16 November 2025, 8:31 pm EST

    Upgrading from 2024 to latest 2025 version and I am referencing CSS via the SASS files. I am getting a large number of deprecation messages:

    The majority are "@import ‘X’;’ which can be replaced by “@use ‘X’ as *”

    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:16:8:
          16 │     @if type-of($color) == 'color' and $color != transparent {
             ╵         ^
    
    
      Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
      Use meta.type-of instead.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:17:16:
          17 │         @return darken($color, $amount);
             ╵                 ^
    
    
      Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
      Use color.adjust instead.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:17:16:
          17 │         @return darken($color, $amount);
             ╵                 ^
    
    
      darken() is deprecated. Suggestions:
    
      color.scale($color, $lightness: -6%)
      color.adjust($color, $lightness: -6%)
    
      More info: https://sass-lang.com/d/color-functions
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:17:16:
          17 │         @return darken($color, $amount);
             ╵                 ^
    
    
      darken() is deprecated. Suggestions:
    
      color.scale($color, $lightness: -5.3571428571%)
      color.adjust($color, $lightness: -5%)
    
      More info: https://sass-lang.com/d/color-functions
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:17:16:
          17 │         @return darken($color, $amount);
             ╵                 ^
    
    
      darken() is deprecated. Suggestions:
    
      color.scale($color, $lightness: -3%)
      color.adjust($color, $lightness: -3%)
    
      More info: https://sass-lang.com/d/color-functions
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:17:16:
          17 │         @return darken($color, $amount);
             ╵                 ^
    
    
      darken() is deprecated. Suggestions:
    
      color.scale($color, $lightness: -32.1428571429%)
      color.adjust($color, $lightness: -30%)
    
      More info: https://sass-lang.com/d/color-functions
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:35:8:
          35 │     @if type-of($color) == 'color' and lightness($color) > 50% {
             ╵         ^
    
    
      Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
      Use meta.type-of instead.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:35:39:
          35 │     @if type-of($color) == 'color' and lightness($color) > 50% {
             ╵                                        ^
    
    
      Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
      Use color.lightness instead.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/misc/_mixins.scss:35:39:
          35 │     @if type-of($color) == 'color' and lightness($color) > 50% {
             ╵                                        ^
    
    
      lightness() is deprecated. Suggestion:
    
      color.channel($color, "lightness", $space: hsl)
    
      More info: https://sass-lang.com/d/color-functions
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/parts/_nav.scss:45:26:
          45 │                 color: if(global-variable-exists(wj-tab-panel-colo...
             ╵                           ^
    
    
      Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
      Use meta.global-variable-exists instead.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/wijmo.scss:15:8:
          15 │ @import "wijmo-core";
             ╵         ^
    
    
      Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/wijmo.scss:18:8:
          18 │ @import "parts/grid_sheet";
             ╵         ^
    
    
      Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/wijmo.scss:19:8:
          19 │ @import "parts/grid_multirow";
             ╵         ^
    
    
      Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/wijmo.scss:20:8:
          20 │ @import "parts/grid_transposed_multirow";
             ╵         ^
    
    
      Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
        angular:styles/global:styles:1:8:
          1 │ @import 'src/styles.scss';
            ╵         ~~~~~~~~~~~~~~~~~
    
    
    ▲ [WARNING] Deprecation [plugin angular-sass]
    
        node_modules/@mescius/wijmo.styles/wijmo.scss:21:8:
          21 │ @import "parts/olap";
             ╵         ^
    
    
      Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
    
      More info and automated migrator: https://sass-lang.com/d/import
    
      The plugin "angular-sass" was triggered by this import
    
    
    
    ▲ [WARNING] 34 repetitive deprecation warnings omitted.
    Run in verbose mode to see all warnings. [plugin angular-sass]
    
    
  • Posted 17 November 2025, 2:31 am EST

    Hi Ken,

    We have forwarded this issue to the engineering team with internal tracking ID- WJM-37218. We will update you when we have an update from the engineering team on the same.

    Regards

  • Posted 18 November 2025, 4:54 am EST

    Hi Ken,

    We have an update from the engineering team: they are planning to update the Wijmo Sass style files in 5.2026v1.MAJOR version, which is expected to be released by mid-March 2026.

    For now, the engineering team has suggested injecting the Wijmo CSS styles through the angular.json file to avoid these warnings -

    "styles": [
      "src/styles.scss",
      "@mescius/wijmo.styles/wijmo.css"
    ]

    Regards

  • Posted 19 November 2025, 8:18 am EST - Updated 19 November 2025, 9:17 am EST

    Thanks for the work around. It is what I am doing. This solution also works around a bug in the wijmo.css file I found (separate scheduled for development ticket).

    Once the wijmo.css is updated I can also inject wijmo.css directly into SCSS and it also works without warnings. ( I have tested this by manually modifying the npm wijmo.css file in order to fix another bug. This is where this “extra” ticket came out from me attempting to work around the first bug.)

    I consider this ticket just tech debt for your consideration. (This was a potential second solution that I wont be using as wijmo.css will the fixed.)

    Another potential temporary solution according to Google AI:

    Temporary workarounds: For projects where immediate migration is not feasible, temporary workarounds exist to silence these warnings, such as configuring stylePreprocessorOptions in angular.json or using the --silence-deprecation=import command-line option for Sass.

  • Posted 19 November 2025, 11:55 pm EST

    Thank you for sharing the details and clarification. We appreciate the additional insights. I will also share your feedback with the development team.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels