Sveltekit中CSS?url导入失败：Vite误将CSS当作JS解析报错

问题场景 #

在SvelteKit v1.16.3项目中，存在如下CSS文件：

.mdc-image-list__image-aspect-container {
    padding-bottom: calc(100% / 1);
}

在Svelte组件中尝试用Vite的显式URL导入规则引入该文件：

<script lang="ts">
    import testCSS from './test.css?url'
    console.log(testCSS)
</script>
<svelte:head>
    <link rel="stylesheet" href="{testCSS}">
</svelte:head>

运行时触发以下错误：

/src/routes/test.css
Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .css?url=&inline= file format, or if it's an asset, add "**/*.css?url=&inline=" to `assetsInclude` in your configuration.
  Plugin: vite:import-analysis
  File: /home/projects/parilmppm.github/src/routes/test.css?url=&inline=:2:36
  1  |  .mdc-image-list__image-aspect-container {
  2  |      padding-bottom: calc(100% / 1);
     |                                     ^
  3  |  }

疑问解答 #

1. Vite为何要预处理CSS文件？ #

Vite内置了CSS处理能力，包括解析@import、处理PostCSS、支持CSS模块化等，目的是让CSS能和JS/TS模块一样被工程化管理，同时实现按需加载、样式隔离等功能，这是现代前端构建工具的标准行为。

2. 为何会把CSS当作JS解析？ #

核心原因是导入参数冲突：你手动添加了?url参数，但SvelteKit的内部处理逻辑自动给请求追加了&inline=参数，最终变成了?url=&inline=。这种混合参数让Vite的解析逻辑混乱——它无法识别这是一个需要返回资源URL的静态资源请求，反而将其当作需要解析为JS模块的文件处理。而CSS语法不符合JS规范，自然就报出了“无效JS语法”的错误。

解决办法 #

方法1：直接导入CSS（推荐） #

不需要通过?url和<link>标签引入，直接在组件中导入CSS文件，SvelteKit会自动处理样式注入：

<script lang="ts">
    import './test.css';
</script>

方法2：配置Vite识别CSS资源URL #

如果一定要用URL导入的方式，需要在vite.config.ts中添加assetsInclude配置，告诉Vite将带?url参数的CSS文件视为静态资源：

import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';

const config: UserConfig = {
    plugins: [sveltekit()],
    assetsInclude: ['**/*.css?url']
};

export default config;

内容的提问来源于stack exchange，提问作者Isaac Weingarten