[sass] Error: The importer must return an absolute URL, was "[object Promise]"

[diegovilar]

Please provide the environment you discovered this bug in.

Reproduction: https://github.com/diegovilar/analog-scss-issue

Which area/package is the issue in?

vite-plugin-angular

Description

It seems like vite-plugin-angular doesn't work correctly with SCSS when it comes to using @use, @import and @forward. It seems to be mixing sync and async APIs from both sass and sass-embedded (tried both). This works as expected with a pure vite setup, but not when using the analog plugin.

Reproduction repo: https://github.com/diegovilar/analog-scss-issue

Steps do reproduce:

1. Create a new project with pnpm create analog@1.21.1 - 49732e7
2. Switch the setup from CSS to SCSS and try to @use another SCSS file - 15a5c14
3. Serve and open the app to see the error

Please provide the exception or error you saw

[plugin:vite:css] [sass] Error: The importer must return an absolute URL, was "[object Promise]"
  ╷
1 │ @use "./styles/global" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  /home/dev/workspace/analog-project/src/styles.scss 1:1  root stylesheet

at handleCompileResponse (/home/dev/workspace/analog-project/node_modules/.pnpm/sass-embedded@1.93.2/node_modules/sass-embedded/dist/lib/src/compiler/utils.js:155:15)
    at AsyncCompiler.compileRequestAsync (/home/dev/workspace/analog-project/node_modules/.pnpm/sass-embedded@1.93.2/node_modules/sass-embedded/dist/lib/src/compiler/async.js:100:54)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Object.run (file:///home/dev/workspace/analog-project/node_modules/.pnpm/vite@7.1.7_jiti@2.6.0_sass-embedded@1.93.2_sass@1.90.0_terser@5.44.0/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:32546:19)
    at async process (file:///home/dev/workspace/analog-project/node_modules/.pnpm/vite@7.1.7_jiti@2.6.0_sass-embedded@1.93.2_sass@1.90.0_terser@5.44.0/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:32574:20)
    at async compileCSSPreprocessors (file:///home/dev/workspace/analog-project/node_modules/.pnpm/vite@7.1.7_jiti@2.6.0_sass-embedded@1.93.2_sass@1.90.0_terser@5.44.0/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:32009:27)
    at async compileCSS (file:///home/dev/workspace/analog-project/node_modules/.pnpm/vite@7.1.7_jiti@2.6.0_sass-embedded@1.93.2_sass@1.90.0_terser@5.44.0/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:32037:30)
    at async TransformPluginContext.handler (file:///home/dev/workspace/analog-project/node_modules/.pnpm/vite@7.1.7_jiti@2.6.0_sass-embedded@1.93.2_sass@1.90.0_terser@5.44.0/node_modules/vite/dist/node/chunks/dep-Bm2ujbhY.js:31579:54)

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

This is a known issue with zone.js interfering with scss compilation. If you setup zoneless change detection, it will work correctly.

[diegovilar]

Thanks for the quick response, @brandonroberts. So, it only works for zoneless apps? If so, that basically rules SCSS out, since most (if not all) UI component libraries still need zone.js. Angular's build pipeline (and even the dev pipeline using esbuild) doesn't have this issue. I haven't dug enough into the plugin, seems odd that zone.js - a runtime dependency - would interfere with build/dev pipelines 🤔, but I indeed noticed while debugging the plugin that promises going around through vite's hooks were patched by zone.js. Out of the top of your head, do you think it's possible to make sure the plugin runs outside zone.js? If you do, I could dig some more and try to get it to do so. Unless you've already tried that...

[brandonroberts]

Good point. I thought it was isolated to Angular Material. There should be a way to not have it patch Vite code though. I'll take another look also

[brandonroberts]

A different workaround is to downgrade vite to ~6.3.5 which still has support for the legacy sass compiler that is not impacted by zone.js.

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2020'],
  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'legacy'
+      }
+    }
+  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts'],
    include: ['**/*.spec.ts'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

[brandonroberts]

Found a fix/workaround with the latest version of Vite 7.x

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
+import type { Importer } from 'sass-embedded';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  build: {
    target: ['es2020'],
  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        importer: {} as Importer
+      }
+    }
+  },
  resolve: {
    mainFields: ['module'],
  },
  plugins: [
    analog(),
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['src/test-setup.ts'],
    include: ['**/*.spec.ts'],
    reporters: ['default'],
  },
  define: {
    'import.meta.vitest': mode !== 'production',
  },
}));

This replaces the internal importer provided by Vite and uses the sass default, which does not have the issue when using zone.js. I tested it against your repo and the sass compiles correctly.