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 earlier Nx versions (prior to `14.1.8`), your configuration would look like this:

```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"]
    }
  }
```

Starting with version `14.1.8`, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` `options` configuration object. For example:

```json
    "storybook": {
      "executor": "@storybook/angular:start-storybook",
      "options": {
        "configDir": "apps/example-lib/.storybook",
        "browserTarget": "example-lib:build-storybook",
      },
    },
    "build-storybook": {
      "executor": "@storybook/angular:build-storybook",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputDir": "dist/storybook/example-lib",
        "configDir": "apps/example-lib/.storybook",
        "browserTarget": "example-lib:build-storybook",
        "styles": [".storybook/custom-styles.scss"],
        "stylePreprocessorOptions": {
          "includePaths": [
            "libs/design-system/src/lib"
          ]
        }
      }
    }
```

When Nx runs, it will load Storybook's configuration and styling based on the `storybook`'s [`browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
