Angular storybook does not read the global styles when bundlename is specified in the angular json

[SunilManthenaG01]

Describe the bug
When using angular builder for storybook, the Global styles are only applied when I specified in the styles like below
"styles": ["src/styles.scss"]
But if I specific the styles with an object like using input and bundleName, will not work.

To Reproduce
Please use the below repo to reproduce the issue.
https://github.com/SunilManthenaG01/storybook-inline-scss-angular-
I added the body css style in styles.scss file. When you run the storybook using npm run storybook click on the app component story and you can see the global styles which are in styles.scss are not applied.
If you change like below, it works fine.

System
Environment Info:
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.62)
npmPackages:
@storybook/addon-actions: ^6.4.19 => 6.4.19
@storybook/addon-essentials: ^6.4.19 => 6.4.19
@storybook/addon-interactions: ^6.4.19 => 6.4.19
@storybook/addon-links: ^6.4.19 => 6.4.19
@storybook/angular: ^6.4.19 => 6.4.19
@storybook/builder-webpack5: ^6.4.19 => 6.4.19
@storybook/manager-webpack5: ^6.4.19 => 6.4.19
@storybook/testing-library: ^0.0.9 => 0.0.9
npmGlobalPackages:
@storybook/cli: 6.4.19

[SunilManthenaG01]

@ThibaudAV If possible can you check on this one and see if we have any workaround for this.
That would be a great help.

[SunilManthenaG01]

Can we please have some one looking at this issue ? or do we have any workaround for this one

[ThibaudAV]

Hann yes i've found the bug :/

We need to add more entry here
https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli-webpack-12.2.x.js#L52

[SunilManthenaG01]

@ThibaudAV that's good to hear. Thank you for looking into this.

[janpapenbrock]

This appears to still be an issue, as we just ran into this.

We're now using a work-around by replicating the same stylesheet definitions again into the storybook builder configuration in angular.json:

        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "styles": [
              {
                "input": "src/styles.scss",
                "bundleName": "app"
              }
            ],
            
        ...
            
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ],

As far as I can tell all PRs related to this have been closed as stale. Any chance to revive any of them?

[wshager]

This is a real issue, because it's the only way you can bundle (shared) CSS for Angular, since it's using SASS. I'm surprised this didn't gain more traction.

The workaround above didn't work for my setup. I had to copy the CSS from the build manually to the public folder.

[valentinpalkovic]

Fixed by #24768.