Deno + Vite环境下Sass加载失败问题求助

问题重现 #

基于create-vite-extra模板搭建Deno+Vite项目，已在vite.config.mjs中添加import "npm:sass@^1.57.0"且包已存在于node_modules，但Vite编译时抛出错误：

14:03:05 [vite] Internal server error: Preprocessor dependency "sass" failed to load:
Empty filepath.
  Plugin: vite:css
  File: C:/project/src/foo.scss
      at pathDirname (deno:ext/node/02_require.js:50:13)
      at new Module (deno:ext/node/02_require.js:255:17)
      at Function.Module._resolveFilename (deno:ext/node/02_require.js:553:30)
      at Function.resolve (deno:ext/node/02_require.js:811:21)
      at requireResolveFromRootWithFallback (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:12238:23)        
      at loadPreprocessor (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:38038:26)
      at scss (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:38083:20)
      at compileCSS (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:37603:40)
      at async TransformContext.transform (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:37156:56)
      at async Object.transform (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:42626:30)
      at async loadAndTransform (file:///C:/project/node_modules/.deno/vite@4.0.2/node_modules/vite/dist/node/chunks/dep-6305614c.js:40434:29)

升级至Deno v1.31.1后问题依旧。

解决步骤 #

1. 调整Vite配置，显式指定Sass实现 #

修改vite.config.mjs，替换直接导入的方式，在CSS预处理器配置中显式注入Sass实例：

import { defineConfig } from "npm:vite@^4.0.2";
import sass from "npm:sass@^1.57.0";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        implementation: sass,
      },
    },
  },
});

2. 启动项目时添加--node-modules-dir参数 #

确保Deno正确识别Node模块目录，启动命令改为：

deno run -A --node-modules-dir npm:vite

3. （可选）改用sass-embedded提升兼容性 #

如果上述方案无效，尝试替换为sass-embedded（Deno对嵌入式版本的路径解析兼容性更好）：

• 安装依赖：deno add npm:sass-embedded@^1.57.0
• 修改配置：

import { defineConfig } from "npm:vite@^4.0.2";
import sass from "npm:sass-embedded@^1.57.0";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        implementation: sass,
      },
    },
  },
});

4. 清除Deno缓存（必要时） #

若存在缓存导致的依赖异常，执行：

deno cache --reload vite.config.mjs

问题原因 #

该错误源于Deno的Node兼容层在处理Vite加载预处理器的逻辑时，无法正确解析sass包的文件路径，导致pathDirname函数获取到空值。通过显式指定Sass实现或使用兼容性更好的sass-embedded，可绕过这一路径解析的兼容问题。

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