🎨 [#724] Address @charset warning emitted by vite-css

The formio styles include an invalid at-rule in the middle of the file,
which vite-css correctly warns about.

The workaround updates the SCSS to use @use rather than @import to
ensure the CSS is included rather than referenced, and this in turn
makes it compatible with the sass preprocessor options to disable the
charset at-rule, effectively getting rid of the warning.

src/styles.scss

@@ -1,18 +1,18 @@
 // Open Forms SDK styles
 // TODO: we should see if we can re-use even smaller bits to shed dead weight and
 // reduce the bundle size
-@import '@fortawesome/fontawesome-free/scss/fontawesome';
-@import '@fortawesome/fontawesome-free/scss/brands';
-@import '@fortawesome/fontawesome-free/scss/regular';
-@import '@fortawesome/fontawesome-free/scss/solid';
-@import 'flatpickr/dist/flatpickr.min.css';
-@import 'formiojs/dist/formio.form.css';
-@import 'leaflet/dist/leaflet';
+@use '@fortawesome/fontawesome-free/scss/fontawesome';
+@use '@fortawesome/fontawesome-free/scss/brands';
+@use '@fortawesome/fontawesome-free/scss/regular';
+@use '@fortawesome/fontawesome-free/scss/solid';
+@use 'flatpickr/dist/flatpickr.min';
+@use 'formiojs/dist/formio.form';
+@use 'leaflet/dist/leaflet';
 
 // output the design tokens under the .openforms-theme classname
-@import '@open-formulieren/design-tokens/dist/index';
+@use '@open-formulieren/design-tokens/dist/index';
 
-@import './scss/nl-design-system-community.scss';
+@use './scss/nl-design-system-community.scss';
 
 @import './scss/settings';
 

vite.config.mts

@@ -56,6 +56,13 @@ export default defineConfig({
     cjsTokens(),
     ejsPlugin(),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        charset: false,
+      },
+    },
+  },
   test: {
     environment: 'jsdom',
     environmentOptions: {