build: fix Stackblitz examples on Firefox

The Stackblitz examples were hanging on the build step, because we had an import of `@angular/material` in the `styles.scss`. These changes switch to using a pre-built theme.

Fixes #31823.
Fixes #31973.
Fixes #28934.

Author: crisbeto

docs/package.json

@@ -46,7 +46,7 @@
     "@angular/router": "catalog:",
     "@angular/ssr": "catalog:",
     "@angular/youtube-player": "workspace:*",
-    "@stackblitz/sdk": "^1.5.2",
+    "@stackblitz/sdk": "^1.11.0",
     "moment": "^2.29.1",
     "path-normalize": "^6.0.13",
     "rxjs": "catalog:",

docs/src/app/shared/stackblitz/stackblitz-writer.ts

@@ -49,7 +49,7 @@ export const TEMPLATE_FILES = [
   'tsconfig.spec.json',
   'src/index.html',
   'src/main.ts',
-  'src/styles.scss',
+  'src/styles.css',
   'src/test.ts',
 ];
 

docs/src/assets/stackblitz/angular.json

@@ -28,12 +28,9 @@
             "browser": "src/main.ts",
             "polyfills": ["zone.js", "@angular/localize/init"],
             "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": ["src/assets"],
-            "styles": ["src/styles.scss"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules/"]
-            },
+            "styles": ["src/styles.css", "@angular/material/prebuilt-themes/azure-blue.css"],
             "scripts": []
           },
           "configurations": {
@@ -92,12 +89,9 @@
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": ["src/assets"],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules/"]
-            },
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.css", "@angular/material/prebuilt-themes/azure-blue.css"],
             "scripts": []
           }
         }

docs/src/assets/stackblitz/src/styles.css

@@ -0,0 +1,10 @@
+body {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  margin: 0;
+  padding: 30px;
+  height: 100%;
+}
+
+html {
+  height: 100%;
+}