diff --git a/docs/configure/css-troubleshooting/angular.mdx b/docs/configure/css-troubleshooting/angular.mdx index ab6674b7547e..d9c6c7a81dd2 100644 --- a/docs/configure/css-troubleshooting/angular.mdx +++ b/docs/configure/css-troubleshooting/angular.mdx @@ -42,7 +42,11 @@ Additionally, if you need Storybook specific styles that are separate from your ``` ### 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: + +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": { @@ -56,11 +60,35 @@ If you're working with Storybook and [NX libraries](https://nx.dev/structure/lib }, "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", + }, }, - "configurations": { - "ci": { - "quiet": true + "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).