66eaf2fc74
This PR removes the `/nx-api` pages from `nx-dev`. They are already redirected from `/nx-api` to either `/technologies` or `/reference/core-api` URLs. e.g. `/nx-api/nx` goes to `/reference/core-api/nx` and `/nx-api/react` goes to `/technologies/react/api` **Changes**: - Remove old `nx-api.json` from being generated in `scripts/documentation/generators/generate-manifests.ts` -- this was used to generate the sitemap - Remove `pages/nx-api` from Next.js app since we don't need them - Remove workaround from link checker `scripts/documentation/internal-link-checker.ts` -- the angular rspack/rsbuild and other workarounds are gone now that they are proper docs in `map.json` - Update Powerpack/Remote Cache reference docs to exclude API documents (since they are duplicated in the Intro page) -- `nx-dev/models-document/src/lib/mappings.ts` - All content in `docs` have been updated with new URL structure **Note:** Redirects are already handled, and Claude Code was used to verify the updated `docs/` URLs (see report below). The twelve 404s links were updated by hand. ## Verification Report https://gist.github.com/jaysoo/c7863fe7e091cb77929d1976165c357a
69 lines
3.4 KiB
Markdown
69 lines
3.4 KiB
Markdown
---
|
|
title: Angular - Configuring styles and preprocessor options
|
|
description: This document explains how to configure styles and preprocessor options in Angular projects with a Storybook configuration.
|
|
---
|
|
|
|
# Configuring styles and preprocessor options for Angular projects with a Storybook configuration
|
|
|
|
{% callout type="note" title="Note" %}
|
|
This documentation page contains information about the [Storybook plugin](/technologies/test-tools/storybook/api), specifically regarding [Angular projects that are using Storybook](/technologies/test-tools/storybook/recipes/overview-angular).
|
|
{% /callout %}
|
|
|
|
Angular supports including extra entry-point files for styles. Also, in case you use Sass, you can add extra base paths that will be checked for imports. In your project's `project.json` file you can use the `styles` and `stylePreprocessorOptions` properties in your `storybook` and `build-storybook` target `options`, as you would in your Storybook or your Angular configurations. If your project is an application, you can add these extra options in your `build` target. Your `storybook` and `build-storybook` `browserTarget` are going to be pointing to the `build` target, so they will pick up these styles from there. Check out the [Angular Workspace Configuration](https://angular.dev/reference/configs/workspace-config#styles-and-scripts-configuration) documentation for more information. You can also check the [official Storybook for Angular documentation](https://storybook.js.org/docs/angular/configure/styling-and-css) on working with styles and CSS.
|
|
|
|
Your Storybook targets in your `project.json` will look like this:
|
|
|
|
```jsonc {% fileName="project.json" %}
|
|
"storybook": {
|
|
"executor": "@storybook/angular:start-storybook",
|
|
"options": {
|
|
...
|
|
"styles": ["some-styles.css"],
|
|
"stylePreprocessorOptions": {
|
|
"includePaths": ["some-style-paths"]
|
|
}
|
|
},
|
|
...
|
|
},
|
|
"build-storybook": {
|
|
"executor": "@storybook/angular:build-storybook",
|
|
...
|
|
"options": {
|
|
...
|
|
"styles": ["some-styles.css"],
|
|
"stylePreprocessorOptions": {
|
|
"includePaths": ["some-style-paths"]
|
|
}
|
|
},
|
|
...
|
|
}
|
|
```
|
|
|
|
## Using build-storybook for styles
|
|
|
|
Chances are, you will most probably need the same `styles` and `stylePreprocessorOptions` for your `storybook` and your `build-storybook` targets. Since you're using `browserTarget`, that means that Storybook will use the `options` of `build` or `build-storybook` when executing the `storybook` task (when compiling your Storybook). In that case, as explained, you _only_ need to add the `styles` or `stylePreprocessorOptions` to the corresponding target (`build` or `build-storybook`) that the `browserTarget` is pointing to. In that case, for example, the configuration shown above would look like this:
|
|
|
|
```jsonc {% fileName="project.json" %}
|
|
"storybook": {
|
|
"executor": "@storybook/angular:start-storybook",
|
|
"options": {
|
|
...
|
|
"browserTarget": "my-project:build-storybook"
|
|
},
|
|
...
|
|
},
|
|
"build-storybook": {
|
|
"executor": "@storybook/angular:build-storybook",
|
|
...
|
|
"options": {
|
|
...
|
|
"browserTarget": "my-project:build-storybook",
|
|
"styles": ["some-styles.css"],
|
|
"stylePreprocessorOptions": {
|
|
"includePaths": ["some-style-paths"]
|
|
}
|
|
},
|
|
...
|
|
}
|
|
```
|