SvelteKit+Vite项目导入sass模块触发栈溢出错误求助

问题背景 #

在SvelteKit + Vite的TypeScript项目中，尝试在运行时导入sass模块动态编译SCSS为CSS时，无论是使用import * as sass from 'sass'还是导入AsyncCompiler/Compiler等具体导出项，都会触发RangeError: Maximum call stack size exceeded错误。即使严格遵循sass官方文档、将包更新至最新版本，问题仍无法解决。

核心原因 #

sass的官方dart-sass实现是为Node.js环境设计的，依赖Node专属API与模块结构。直接在SvelteKit客户端运行时（浏览器环境）导入，会因环境不兼容导致模块内部出现无限递归的getter调用，最终触发栈溢出。

可行解决方案 #

1. 将编译逻辑移至服务器端（推荐） #

利用SvelteKit的API路由，把SCSS编译逻辑放在服务器端执行，客户端通过HTTP请求获取编译结果：

步骤1：创建API路由

// src/routes/api/compile-scss/+server.ts
import { compile } from 'sass';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ request }) => {
  const { scssCode } = await request.json();
  try {
    const compileResult = compile(scssCode);
    return new Response(compileResult.css, {
      headers: { 'Content-Type': 'text/css' }
    });
  } catch (err) {
    return new Response((err as Error).message, { status: 400 });
  }
};

步骤2：客户端调用API

async function compileSCSS(scssContent: string): Promise<string> {
  const response = await fetch('/api/compile-scss', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ scssCode: scssContent })
  });
  if (!response.ok) throw new Error('编译失败');
  return response.text();
}

2. 使用浏览器兼容的SCSS编译库 #

替换为纯JavaScript实现、适配浏览器环境的SCSS编译器，比如sass.js：

安装依赖

npm install sass.js

客户端直接编译

import Sass from 'sass.js';

async function compileSCSS(scssContent: string): Promise<string> {
  return new Promise((resolve, reject) => {
    Sass.compile(scssContent, (result) => {
      if (result.status === 0) {
        resolve(result.text);
      } else {
        reject(new Error(result.formatted));
      }
    });
  });
}

3. Vite配置强制兼容（备选，不推荐） #

通过Vite配置强制将sass按Node环境打包，但可能引发其他环境兼容问题，仅作为临时方案：

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

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    exclude: ['sass']
  },
  ssr: {
    noExternal: ['sass']
  }
});

内容的提问来源于stack exchange，提问作者Andrej Schäfer