# Replace sass-rails with dartsass-rails and migrate SCSS imports to @use

[sahilLikes2Code]

Overview

This PR replaces the sass-rails gem with dartsass-rails to resolve compatibility issues with the current Rails setup, updates the main SCSS entry to address Dart Sass deprecation / ordering warnings, and adds a PostCSS plugin to handle CSS property deprecations.

Changes

• Replaced gem "sass-rails", ">= 6" with gem "dartsass-rails" in Gemfile
• Updated Gemfile.lock with the new dependency
• Updated app/javascript/stylesheets/application.scss:
  • Replaced project @import usages with @use "<path>" as *; (minimal, non-breaking)
  • Reordered imports so all @use rules are at the top (required by Dart Sass)
  • Left the third-party CSS import (react-toastify/dist/ReactToastify.min.css) after the @use block
• Updated postcss.config.js:
  • Added custom PostCSS plugin to replace deprecated color-adjust property with print-color-adjust
  • Silences PostCSS deprecation warnings during Vite builds

Why

• sass-rails produced build errors with the current Ruby / Rails environment.
• dartsass-rails uses Dart Sass and resolves the initial compatibility failures.
• Dart Sass deprecates @import; migrating to @use removes deprecation warnings and prevents future breakage.
• PostCSS deprecation warnings about color-adjust are addressed with automatic property replacement.

What I verified

• The gem and lockfile are updated in this branch.
• The main SCSS entry compiles with Dart Sass when node_modules is in the load path.
• Dev stack starts without the previous @use ordering error. The PostCSS plugin silences color-adjust warnings.
• Note: a full npx vite build failed due to a missing entry unrelated to these changes; SCSS-related errors no longer occur.

`