Fix fonts not loading.

.storybook/preview.scss

@@ -2,7 +2,6 @@
 |* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-//@use '../src/styling/fonts.scss';
 @use '../src/styling/main.scss';
 
 

scripts/verify.ts

@@ -53,18 +53,18 @@ const readDistCss = async () => {
 // Commands
 //
 
-export const runVerifyDist = async (args: ScriptArgs) => {
+export const runVerifyBuild = async (args: ScriptArgs) => {
   const { logger } = getServices();
 
   const cssContent = await readDistCss();
   const cssContentStripped = cssContent.replaceAll(`@charset "UTF-8";`, '').trim();
 
   // We need to make sure that an `@layer` ordering is at the beginning of the CSS build file.
   if (!cssContentStripped.match(/^@layer [^{]+?;/)) {
-    throw new Error(`Missing @layer ordering at the start of the CSS dist file`);
+    throw new Error(`Missing @layer ordering at the start of the CSS build file`);
   }
 
-  logger.log('Everything okay');
+  logger.log('verify:build – No issues found');
 };
 
 
@@ -79,7 +79,7 @@ const printUsage = () => {
     Usage: verify.ts <cmd> <...args>
     
     Commands:
-      - verify:dist
+      - verify:build
   `);
 };
 
@@ -111,7 +111,7 @@ export const run = async (argsRaw: Array<string>): Promise<void> => {
 
     const argsForCommand: ScriptArgs = { ...args, positionals: args.positionals.slice(1) };
     switch (command) {
-      case 'verify:dist': await runVerifyDist(argsForCommand); break;
+      case 'verify:build': await runVerifyBuild(argsForCommand); break;
       default:
         logger.error(`Unknown command '${command}'\n`);
         printUsage();

src/styling/global/fonts.scss

@@ -16,6 +16,9 @@
 }
 
 @mixin styles {
+  // NOTE: all file references must use absolute paths (with `@/path`), because vite will not resolve paths from files
+  // that were referenced with `@use` (let alone styles in mixins).
+
   /*
   Open Sans
   https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
@@ -26,23 +29,23 @@
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 400;
-    src: local(''), url('../../assets/fonts/open-sans/open-sans-v23-latin-regular.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/open-sans/open-sans-v23-latin-regular.woff2') format('woff2');
     font-display: block;
   }
   /* open-sans-600 - latin */
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 600;
-    src: local(''), url('../../assets/fonts/open-sans/open-sans-v23-latin-600.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/open-sans/open-sans-v23-latin-600.woff2') format('woff2');
     font-display: block;
   }
   /* open-sans-700 - latin */
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 700;
-    src: local(''), url('../../assets/fonts/open-sans/open-sans-v23-latin-700.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/open-sans/open-sans-v23-latin-700.woff2') format('woff2');
     font-display: block;
   }
 
@@ -57,7 +60,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 100;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-100.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-100.woff2') format('woff2');
     font-display: block;
   }
 
@@ -66,7 +69,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 200;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-200.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-200.woff2') format('woff2');
     font-display: block;
   }
 
@@ -75,7 +78,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 300;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-300.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-300.woff2') format('woff2');
     font-display: block;
   }
 
@@ -84,7 +87,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-regular.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-regular.woff2') format('woff2');
     font-display: block;
   }
 
@@ -93,7 +96,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 500;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-500.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-500.woff2') format('woff2');
     font-display: block;
   }
 
@@ -102,7 +105,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 600;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-600.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-600.woff2') format('woff2');
     font-display: block;
   }
 
@@ -111,7 +114,7 @@
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 700;
-    src: local(''), url('../../assets/fonts/montserrat/montserrat-v25-latin_latin-ext-700.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/montserrat/montserrat-v25-latin_latin-ext-700.woff2') format('woff2');
     font-display: block;
   }
 
@@ -126,7 +129,7 @@
     font-family: 'Source Code Pro';
     font-style: normal;
     font-weight: 400;
-    src: local(''), url('../../assets/fonts/source-code-pro/source-code-pro-v14-latin-regular.woff2') format('woff2');
+    src: local(''), url('@/assets/fonts/source-code-pro/source-code-pro-v14-latin-regular.woff2') format('woff2');
     font-display: block;
   }
 

vite.config.ts

@@ -20,6 +20,14 @@ export default defineConfig({
 
   assetsInclude: ['**/*.md'], // Add `.md` as static asset type
 
+
+  resolve: {
+    alias: {
+      // Needed for file references in Sass code (relative paths don't resolve properly when imported with `@use`)
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+
   plugins: [
     react(),