Vite: import SASS frameworks and fonts

[Dekker1]

One of the things that I was most interested in when I saw the added JS/Vite support (as someone trying to minimize the amount of JS itself) was that this could potentially minimize the storage of raw dependency files, such as an SASS framework and fonts in the repository. It might be that I'm not versed well enough in Vite configuration, but I couldn't make it work.

For SASS, I was for example trying to include @picocss/pico, which after pnpm add @picocss/pico instructs to use @use "pico";. However, this results in SASS compilation failed: Error: Can't find stylesheet to import.. I tried different paths and attempted to find any Vite or dodeca options, but didn't find anything that seemed to make a difference.

Similarly, I thought it would be great to grab font files from a package. For example, pnpm add @fontsource/iosevka. This seemed to work for ddc serve when using the following in the main.scss file.

@font-face {
	font-family: "Iosevka";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url("/node_modules/@fontsource/iosevka/files/iosevka-latin-400-normal.woff2")
		format("woff2");
}

However, the files were not included (and not processed) when performing ddc build. As a workaround, I thought that an easy solution was to create a symbolic link ln -s from node_modules/@fontsource/iosevka/files/iosevka-latin-400-normal.woff2 to static/fonts/iosevka-latin-400-normal.woff2. However, it still seems to get ignored on ddc build.

[fasterthanlime]

Yep something is up, see #239

[Dekker1]

Thanks for the prompt response. That issue does look similar in the way that for the fonts the serve and build don't match up.

However, my concern might be a little more general. I just don't understand how SASS and fonts retrieved using pnpm should be used. Are you actually supposed to use paths starting with /node_modules/ in your SASS files, and is that supposed to work with @use in SASS as well?

[FlorianDevP]

Are you actually supposed to use paths starting with /node_modules/ in your SASS files, and is that supposed to work with @use in SASS as well?

No, installed packages should be resolved by name, without the node_modules folder.
Unlike yarn or bun, Pnpm is compatible with npm, because it installs packages in a specific way into the node_modules folder.
It does use symlinks for that (for deduplication and monorepos), which could cause problems and have caused problems in the past.