Unknown file extension ".css"

[mawoka-myblock]

Describe the bug

I am not able to import .css-files from node_modules, e. g. fontsource-fonts or tippy.js styles, etc. I've submitted a reproduction-url to a SvelteKit-project, since the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte. The error deosn't occur when building the app, but in dev-mode and preview-mode.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nkr8q8?file=src/routes/index.svelte

System Info

System:
    OS: Linux 5.17 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 3.79 GB / 15.56 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 17.9.0 - ~/.nvm/versions/node/v17.9.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v17.9.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v17.9.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chromium: 103.0.5060.114
  npmPackages:
    vite: ^3.0.1 => 3.0.4 

(Same happens in StackBlitz as well)

Used Package Manager

pnpm

Logs

Click to expand!

❯ npm run preview -- --host 0.0.0.0                                          

> vite-project@0.0.0 preview
> cross-env NODE_ENV=production node server "--host" "0.0.0.0"

Server started at http://localhost:5173
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /tmp/vite-project/node_modules/@fontsource/marck-script/index.css
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:122:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:431:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:350:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:369:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:328:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte.

Just to clarify, do you mean it happens with npm create vite-extra@latest -- --template ssr-svelte?

Also I think #8454 will fix this.

[mawoka-myblock]

the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte.

Just to clarify, do you mean it happens with npm create vite-extra@latest -- --template ssr-svelte?

Also I think #8454 will fix this.

Yes, it happens with npm create vite-extra@latest -- --template ssr-svelte and I also think that the PR could fix it, but it is a (in my opinion) high priority bug, since it breaks a major feature, which worked before.

[sapphi-red]

For a workaround, you could use this config:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()],
	ssr: {
		noExternal: ['@fontsource/major-mono-display']
	}
};

export default config;