sass: Migrate from deprecated @import to @use

[nbogie]

Fixes #1309

Changes:

• moves from use of @import to @use
• changes paths used in import/use directives, removing leading slash:
  e.g. /styles/variables.scss to styles/variables.scss
• configures sass through vite config so that future use of @import (an accidental regression) will break the build with appropriate message.

status:

Working locally, but I'll do some more build and deployment testing (esp through CI) to check the generated css (e.g. for duplication) and to check for issues on our CI platform.

discussion (opinions)

While it's possible to rename the namespace when using @use,
So instead of:

@use "styles/variables.scss";
@media (min-width: variables.$breakpoint-tablet) {

We could write:

@use "styles/variables.scss as v";
@media (min-width: v.$breakpoint-tablet) {

but I suggest sticking with the full namespace (in this case variables) is less surprising, more self-descriptive, easier for find/find-replace, and not too long.

(Anyway, that can be decided and changed going fwd.)

[limzykenneth]

Full namespace is fine as it is not very significant. Let me know when you are ready with this one and I can check locally as well.