Angular Storybook projects don't generate bundled styles

[martinsik]

Current Behavior

When I have the following project configuration for an Angular Storybook target, storybook.scss will be correctly compiled and saved to dist/storybook/myapp/main.css. However, none of the other style objects with bundleName are saved anywhere. They are processed (when I misspell any name or use wrong import it throws an error) but not saved to dist/storybook/myapp directory. When I use the same "styles" config in an Angular project the styles are properly generated and saved.

The styles option should be supported according to https://nx.dev/packages/storybook/executors/build#styles.

// "executor": "@storybook/angular:build-storybook",
// "outputs": ["{options.outputDir}"],
"options": {
  "outputDir": "dist/storybook/myapp",
  "configDir": "apps/myapp/.storybook",
  "browserTarget": "myapp:build",
  "compodoc": false,
  "styles": [
    "apps/myapp/src/storybook.scss",
    {
      "input": "apps/myapp/src/themes/blue.scss",
      "bundleName": "blue.theme.css",
      "inject": true
    },
    {
      "input": "apps/myapp/src/themes/green.scss",
      "bundleName": "green.theme",
      "inject": false
    },
    {
      "input": "apps/myapp/src/themes/purple.scss",
      "bundleName": "purple.theme",
      "inject": false
    }
  ]
},

Expected Behavior

All styles defined using a config object should be saved to dist/storybook/myapp directory like it does with normal Angular projects.

I tested this problem with Nx@13 and Nx@14 and the behavior is the same.

Steps to Reproduce

1. Clone repo https://github.com/martinsik/test-nx14
2. npm ci
3. npm run sb:build
4. Check dist/storybook/myapp dir. It's missing all bundled styles (it should contain blue.theme.css, green.theme.css and purple.theme.css).

When you build the Angular project with npm run build it generates bundled styles into dist/apps/myapp as expected.

Environment

 >  NX   Report complete - copy this into the issue template

   Node : 16.16.0
   OS   : darwin arm64
   npm  : 8.11.0

   nx : 14.5.4
   @nrwl/angular : 14.5.4
   @nrwl/cypress : 14.5.4
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.5.4
   @nrwl/eslint-plugin-nx : 14.5.4
   @nrwl/express : Not Found
   @nrwl/jest : 14.5.4
   @nrwl/js : 14.5.4
   @nrwl/linter : 14.5.4
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.5.4
   @nrwl/web : 14.5.4
   @nrwl/workspace : 14.5.4
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:
     @storybook/angular: 6.5.10

[mandarini]

Hi there @martinsik ! Thanks for filing an issue! :)

I see the confusion! The styles option you mention is available for the @nrwl/storybook:build executor. However, in the case of Angular projects, you are using the @storybook/angular:build-storybook. I see that your project has a build target, so you can add the styles in the build target instead of the build-storybook target, and I expect it should work. If you also read the documentation for adding styles maybe it can help in your case. You can also read the official Storybook docs for adding styles to Angular Storybook projects. Keep in mind that in the case of Angular projects, Nx is just using the native Storybook builders, so any issues that come up are best addressed with that in mind.

Let me know if my suggestions help!

[mandarini]

Hi @martinsik ! Did you get a chance to look into this?

[martinsik]

@mandarini Hi, thanks for your reply! My goal was to be able to compile styles without compiling the Angular application (that's why I have a separate target build-storybook). Right now as a workaround I have dependsOn option that first compiles the app and then I'm using staticDirs in my Storybook config to map the compiled dist assets to the Storybook app. This works but every startup is slow.

I'm looking into https://storybook.js.org/docs/angular/configure/styling-and-css now and they don't mention that styles option supports also objects as https://angular.io/guide/workspace-config#styles-and-scripts-configuration does. So maybe this is a problem with Storybook after all.

[mandarini]

Ahh I see! Yeah, that sounds like it must be on the Storybook side. Do you mind creating a new issue on the Storybook repository? And mention this one. Let's close this for now, and if it turns out it's on Nx, we can reopen!

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.