build: Fix noisy sass deprecation warnings by migrating away from @import

Running npm run dev outputs 300+ lines of deprecation warnings regarding sass @import rules.

These messages are noisy and distracting and will quite possibly cause developers to miss other more useful warnings, and cause new developers to worry that something is not set up correctly on their environments.

You can read about the deprecation on the official blog post.

Example message:

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

  ╷
2 │   @import "../../styles/variables.scss";
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

src/layouts/HomepageLayout.astro 2:11 root stylesheet

Proposal

These messages can be silenced, and the @import mechanism is not expected to be removed until Dart Sass 3.0.0 ("timeline").

However, I suggest we migrate away from the use of @import now. (This will give us time to solve any resulting teething problems, rather than eventually be time-pressured to rush migration and trouble-shooting in future.)

Include config so that future uses of @import break the build immediately, to make them easy to spot and prevent.

(I suggest we migrate on both 2.0 and main, keeping them in sync and making it easier for future changes to be applied to both branches.)

Reading

• Import is deprecated
• Differences between @use and @import
• Docs on why and how to migrate from @import