nx: Migrate deprecated Sass @import to @use

Task

The Sass @ import rule, which our project currently uses, is deprecated and will be completely removed in Dart Sass v3.0.0. Our build process already shows several deprecation warnings related to this.

To ensure future compatibility and align with modern best practices for CSS, we need to migrate our entire codebase from the @import rule to the new Sass module system, which uses @ use and @ forward.

The recommended approach is to first attempt the migration using the official sass-migrator tool. If the tool fails or produces unsatisfactory results, the migration should be completed manually.

Deprecation Warning [import]: 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

Proposed Objective

Please Select

Proposed Priority

Please Select

Acceptance Criteria

• The developer attempts to use the sass-migrator npm package to perform the migration across the entire codebase.
• All .scss files are updated to use @ use and @ forward instead of the deprecated @ import rule.
• The project compiles successfully without any Sass-related deprecation warnings.
• A manual smoke test of the application is performed to ensure no functional or significant visual regressions have been introduced by the style changes.

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

Sass Migration Guide: https://sass-lang.com/documentation/breaking-changes/import/

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

Start by inventorying the codebase's .scss files and reviewing the Sass build process, then run the sass-migrator tool as requested. Check the generated changes for remaining @import rules and verify the application build produces no Sass deprecation warnings. Done includes a successful build and a manual smoke test without significant visual or functional regressions.