update dart-sass && webpack config to use modern-api option, or ensure dart-sass stays to a lower version

[chrabyrd]

Per the sass website

Dart Sass originally used an API based on the one used by Node Sass, but replaced it with a new, modern API in Dart Sass 1.45.0. The legacy JS API is now deprecated and will be removed in Dart Sass 2.0.0.

And if you've built an Arches application with any dart-sass updated to version 1.79.0+, you'll notice over 100 warnings when building the frontend static asset bundle. Similar to:

WARNING in ./${my_project}/media/css/themes/_project.scss (./${my_project}/media/css/themes/_project.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-5.use[3]!./${my_project}/media/css/themes/_project.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api
 @ ./${my_project}/media/css/themes/_project.scss

There are 2 options to resolve this issue:

1. We update webpack's sass-loader config to use

...
options: {
              api: "modern-compiler",
              ...
}

And also update all sass files to cease using legacy API calls, namely the @import method. A quick attempt at fixing this locally has proved to the task to be somewhat of a heavy lift.

2. Alternatively, we can ensure dart-sass stays pinned to a lower version with the idea that when the application is fully cutover to Vue, we will abandon css pre-processors. This option will most likely need discussion amongst the team and larger community.