Adding the Angular Material theme to Stackblitz Projects with Angular 17?

Question

In previous versions of Stackblitz there used to be a styles.css file and to use one of the prebuilt themes we could just add an import to styles.css like this.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

However with the latest Stackblitz which uses global_styles.css this errors.

https://stackblitz.com/edit/stackblitz-starters-od474b?file=src%2Fmain.ts,src%2Fglobal_styles.css

How do we import themes in Stackblitz with Angular 17?

Answer 1

v17 uses the application builder when creating a project from scratch.

This builder relies on Esbuild which doesn't support "~" in path (it's a webpack feature).

Remove the ~ and you're good.

@import '@angular/material/prebuilt-themes/indigo-pink.css';

Also you're missing the MatButtonModule in your example and dont forget to import the icons font.