Fix import ordering using scss for Next AppDir

Author: garronej

src/assets/dsfr_plus_icons.scss

@@ -0,0 +1,3 @@
+
+@use '../dsfr/utility/icons/icons.min.css';
+@use '../dsfr/dsfr.min.css';

src/next-appdir/DsfrHead.tsx

@@ -7,7 +7,10 @@ import FaviconSvg from "../dsfr/favicon/favicon.svg";
 import FaviconIco from "../dsfr/favicon/favicon.ico";
 import { getScriptToRunAsap } from "../useIsDark/scriptToRunAsap";
 import { fontUrlByFileBasename } from "./fontUrlByFileBasename";
-import "../assets/dsfr_plus_icons.css";
+//NOTE: As of now there is no way to enforce ordering in Next Appdir
+//See: https://github.com/vercel/next.js/issues/16630
+// @import url(...) doesn't work. Using Sass and @use is our last resort.
+import "../assets/dsfr_plus_icons.scss";
 
 export type DsfrHeadProps = {
     defaultColorScheme: ColorScheme | "system";