Can anyone provide a usage example with SvelteKit / Vite preprocessor?

[bjmc]

Hello, I'm trying to use the USWDS in a SvelteKit application, which by default uses Vite for CSS preprocessing.

Despite several attempts and reading various bits of documentation, I haven't succeeded in getting it working yet, and I'm hoping somebody here can spot what I'm doing wrong and point me in the right direction. I keep getting an error:

[plugin:vite-plugin-svelte] Error while preprocessing /home/bjmc/Sandbox/myProject/src/routes/+layout.svelte - [sass] Can't find stylesheet to import.
   ╷
11 │ @forward 'uswds';
   │ ^^^^^^^^^^^^^^^^
   ╵
  src/lib/index.scss 11:1                             @forward
  src/routes/+layout.svelte.vite-preprocess.scss 2:2  root stylesheet

My svelte.config.js file looks like this:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess({
		scss: {
			loadPaths: ["node_modules/@uswds/uswds/packages"],
			includePaths: ["node_modules/@uswds/uswds/packages"],
			verbose: true,
		}
	}
	),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

My vite.config.ts looks like this:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	css: {
		preprocessorOptions: {
			sass: {
				renderSync: true,
				verbose: true,
				includePaths: ["node_modules/@uswds/uswds/packages"],
				loadPaths: ["node_modules/@uswds/uswds/packages"],
			}
		}
	}
});

As you can see, I've tried adding both the newer loadPaths option and the legacy includePaths options to every config file possible, but with no luck so far.

I've followed this USWDS documentation in creating my my index.scss entry point:

/* index.scss */

// 1. Load your project's USWDS settings configuration
@forward "local-variables.scss";

// 2. Load USWDS source code
@forward 'uswds';

// 3. Load your project's custom Sass
@forward "project-styles.scss";

It's failing on step 2 when it can't locate the USWDS files inside node_modules, Yes, they are installed because running SASS directly from the command line...

$ npx sass --load-path="node_modules/@uswds/uswds/packages" src/lib/index.scss ./out.css

...works fine and produces compiled output. I just can't figure out how to make SvelteKit/Vite do the same thing as part of its build step.

[jbouder]

Here's how I'm doing it in a React/Vite project: https://github.com/MetroStar/comet-starter/blob/main/vite.config.ts. Definitely took some figuring out...hopefully this helps.

[bjmc]

Thanks! That was helpful. It turns out the required change was extremely minor, I just hadn't spotted it. On line 11, I had sass but I needed to have scss. 🤦

This is my working vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	css: {
		preprocessorOptions: {
			scss: {
				renderSync: true,
				verbose: true,
				includePaths: ["node_modules/@uswds/uswds/packages"],
			}
		}
	}
});

I'm still getting some 404 errors on the fonts, e.g. http://localhost:5173/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2 but that's probably a separate issue.

Thanks for your help!

[jbouder]

Might need to set the font paths in your uswds settings. Here I’m doing it with an alias, which is defined in my vite config: https://github.com/MetroStar/comet-starter/blob/main/src/providers/uswds/uswds-settings.scss

[mejiaj]

Just chiming in, I'm only using USWDS tokens on a private project and my config looks like this:

// Using vite@4.5.1
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: ["./node_modules/@uswds/uswds/packages"],
      },
    },
  }
});