How do we configure the loading of global Angular Material theme stylesheets for Storybook? – Javascript

This answer is Nx specific but should be adaptable.

If you’re using a singular storybook-host

Example libs/storybook-host/project.json

{
  "name": "storybook-host",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "library",
  "sourceRoot": "libs/storybook-host/src",
  "prefix": "yourOrg",
  "targets": {
    "storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "port": 4400,
        "configDir": "libs/storybook-host/.storybook",
        "browserTarget": "storybook-host:build-storybook",
        "compodoc": false,
        "styles": [
          {
            "input": "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
          }
        ]
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputDir}"],
      "options": {
        "outputDir": "dist/storybook/storybook-host",
        "configDir": "libs/storybook-host/.storybook",
        "browserTarget": "storybook-host:build-storybook",
        "compodoc": false,
        "styles": [
          {
            "input": "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
          }
        ]
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "test-storybook": {
      "executor": "nx:run-commands",
      "options": {
        "command": "test-storybook -c libs/storybook-host/.storybook --url=http://localhost:4400"
      }
    }
  },
  "tags": ["type:storybook"],
  "implicitDependencies": [
    // ui library names
  ]
}

With preview.html

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

A hazardous guess at what angular.json will look like (it’s been awhile since I’ve messed around with these files).

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        // ...
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-project:build"
          }
        },
        // ...
        // starting from here
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "outputPath": "dist/storybook"
            "configDir": ".storybook",
            "compodoc": false,
            "styles": [
              {
                "input": "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
              }
            ]
          },
          // similar for storybook, test-storybook
        }
      }
    }
  },
  "defaultProject": "my-project"
}