storybook/docs/configure/css-troubleshooting/angular.mdx

With Angular, you'll need to take special care of handling CSS.

### Working with previous versions

If you're working with an older version of Angular, in addition to providing a custom Webpack configuration, you can also use an inline loader to load your CSS safely. For example:

```js
import '!style-loader!css-loader!./styles.css';
```

### With Angular 13

With Angular version 13 and above, you should use a builder configuration to import your CSS, for example:

```json
{
  "my-project": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "styles": ["src/styles.css", "src/styles.scss"]
        }
      }
    }
  }
}
```

Additionally, if you need Storybook specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles:

```json
{
  "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": [".storybook/custom-styles.scss"]
    }
  }
}
```

### Nx with Angular 13
If you're working with Storybook and [NX libraries](https://nx.dev/structure/library-types), you can extend your project's configuration (i.e., `project.json`) and provide the application's styles. For example: 

```json
 "build-storybook": {
    "executor": "@nrwl/storybook:build",
    "outputs": ["{options.outputPath}"],
    "options": {
      "uiFramework": "@storybook/angular",
      "outputPath": "dist/storybook/example-lib",
      "config": {
        "configFolder": "libs/example-lib/storybook/.storybook"
      },
      "projectBuildConfig": "example-lib:build-storybook",
      "styles": ["apps/example-app/src/styles.scss"]
    },
    "configurations": {
      "ci": {
        "quiet": true
      }
    }
  }  
```