withastro/astro · error · AggregateError

${cssTransformErrors[0].message}

Error message

${cssTransformErrors[0].message}

What it means

After compiling a component, Astro re-throws CSS transform errors collected while preprocessing `<style>` blocks: a single failure is rethrown as-is, while two or more are wrapped in an `AggregateError` carrying every error in `.errors`. The message shown is the first error's message.

Solutions

1. Read the first error's message and file/line — it identifies the exact style block.
2. Fix the preprocessor syntax (nesting braces, semicolons, variable syntax).
3. Install the preprocessor dependency: `npm install -D sass` for `lang="scss"`.
4. Validate postcss.config / tailwind config referenced by the style pipeline.

Example fix

<!-- before -->
<style lang="scss">
  .card { color: red;
</style>

<!-- after -->
<style lang="scss">
  .card { color: red; }
</style>

// For style pipelines you control: compile styles in isolation first
import { compileString } from 'sass';
compileString(scssSource, { style: 'expanded' }); // throws with line info before Astro does

try {
  await buildComponent(file);
} catch (err) {
  // one failing style rethrows the error; several arrive as AggregateError
  const errors = err instanceof AggregateError ? err.errors : [err];
  for (const e of errors) console.error(e.message);
  process.exitCode = 1;
}

When it happens

Trigger: A Sass/Less/PostCSS transform failing on a component's style block — invalid SCSS syntax, missing `sass` package for `lang="scss"`, or a broken postcss config. Multiple failing `<style>` blocks in one component produce the `AggregateError` path.

Common situations: Adding `<style lang="scss">` without `sass` installed; a typo in nested SCSS; postcss.config referencing a plugin that is not installed; several styles failing at once after a syntax-affecting change.

Related errors

• Unable to find CSS for
• Unable to find CSS for
• You must import your Tailwind stylesheet, e.g. in a shared…

AI-assisted analysis of withastro/astro@3578d45d34 (2026-08-18). Data as JSON: /api/errors/d2bba9013037c4d0. Report an issue: GitHub.

Appendix: source

Thrown at packages/astro/src/core/compile/compile.ts:119

			name: 'CompilerError',
			message: compilerError.text,
			location: {
				line: compilerError.labels[0].line,
				column: compilerError.labels[0].column,
				file: filename,
			},
			hint: compilerError.hint,
		});
	}

	switch (cssTransformErrors.length) {
		case 0:
			break;
		case 1: {
			throw cssTransformErrors[0];
		}
		default: {
			throw new AggregateError({
				...cssTransformErrors[0],
				errors: cssTransformErrors,
			});
		}
	}
}

function normalizeFilename(filename: string, root: URL) {
	const normalizedFilename = normalizePath(filename);
	const normalizedRoot = normalizePath(fileURLToPath(root));
	if (normalizedFilename.startsWith(normalizedRoot)) {
		return normalizedFilename.slice(normalizedRoot.length - 1);
	} else {
		return normalizedFilename;
	}
}

View on GitHub (pinned to 3578d45d34)