(docs) Updated Angular styles Nx docs

storybookjs · May 25, 2022 · d548cdf · d548cdf
1 parent c7f7b79
commit d548cdf
Showing 1 changed file with 33 additions and 5 deletions.
diff --git 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).