使用Vite构建SvelteKit应用失败，预渲染返回退出码1求助

问题背景 #

执行npm run build --debug时触发预渲染失败错误：

[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
    at ChildProcess.<anonymous> ([path to project, omitted])
    at ChildProcess.emit (node:events:513:28)
    at ChildProcess.emit (node:domain:489:12)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)

npm run dev可正常运行，但npm run preview、npm run build均失败，部署到Vercel时也出现相同错误。同时收到CSS压缩警告：

(30)...warnings when minifying css:
▲ [WARNING] Unexpected "$" [css-syntax-error]
...

问题定位 #

Unexpected "$"警告是核心原因——$是SCSS变量的标识，说明CSS压缩阶段仍存在未被编译的SCSS语法，导致语法解析失败，进而触发预渲染流程报错。

解决方案 #

1. 安装必要依赖 #

确保项目已安装sass（svelte-preprocess编译SCSS需要依赖它）：

npm install sass --save-dev

2. 修正SCSS导入路径 #

svelte-preprocess的prependData中，导入路径建议使用项目根目录相对路径，去掉开头的./避免解析歧义：
修改svelte.config.js中的SCSS配置：

scss:{
    prependData:`@import 'src/scss/styles.scss';`
},

3. 检查组件样式标签 #

所有使用SCSS语法的Svelte组件，必须在<style>标签上添加lang="scss"属性，否则svelte-preprocess不会处理其中的SCSS语法：

<style lang="scss">
/* 这里可以正常使用SCSS变量、嵌套等语法 */
$primary-color: #2c3e50;
.container {
    color: $primary-color;
}
</style>

4. 简化预处理器配置 #

将svelte.config.js中的preprocess数组改为单个预处理器调用（原数组仅包含一个元素，无需数组包裹）：

import preprocess from "svelte-preprocess";
import vercel from "@sveltejs/adapter-vercel"

const config = {
    kit: {
        adapter: vercel(),
    },
    preprocess: preprocess({
        scss:{
            prependData:`@import 'src/scss/styles.scss';`
        },
        postcss:true,
    }),
};

export default config;

5. 进一步排查（若上述步骤无效） #

• 查看完整警告信息，定位触发Unexpected "$"的具体文件，检查该文件中的SCSS语法是否存在错误（如未闭合的变量引用、非法嵌套等）。
• 临时禁用PostCSS测试：将postcss:true改为postcss:false，确认是否是PostCSS插件与SCSS编译流程冲突。
• 临时禁用预渲染：在svelte.config.js的kit配置中添加prerender: { enabled: false }，若此时npm run build成功，说明预渲染失败确实由CSS语法错误导致。

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