[Bug]: Storybook angular scss inline styles interpolated with js variable not working

[nicolae536]

Describe the bug

I'm having the following angular component styles which work in the normal project but don't work in storybook angular

styles: [
        `
            @use '@houzy-components/scss' as dsm;

            hzy-overview-page {
                margin-top: 0;

                @include dsm.breakpoints-large-up {
                    margin-top: dsm.$spacing-lg;
                }
            }

            .hzy-dashboard-banner-container {
                margin-top: dsm.$spacing-lg;
            }
        `,
        `
            @use '@houzy-components/scss' as dsm;

            .hzy-teaser-template-image {
                width: 100%;
                height: 100vh;
                opacity: 0.2;
                background-size: contain;
                background-position: top center;
                background-repeat: no-repeat;

                &.${PlatformSection.Buy} {
                    background-image: url('/assets/images/dashboard/buying-dashboard.png');
                }

                &.${PlatformSection.Sell} {
                    background-image: url('/assets/images/dashboard/selling-dashboard.png');
                }

                &.${PlatformSection.Own} {
                    background-image: url('/assets/images/dashboard/living-dashboard.png');
                }

                &.${PlatformSection.Buy}, &.${PlatformSection.Sell}, &.${PlatformSection.Own} {
                    @include dsm.breakpoints-small {
                        background-image: url('/assets/images/dashboard/dashboard-mobile.png');
                        background-size: cover;
                    }
                }
            }
        `,
    ],

If I understand correctly when we interpolate js variables with scss it's not compiled correctly in storybook. The resulted styles in storybook are.

You can see that the resulted style in storybook when interpolating js is not correct. But the first compiled style is fine which uses just scss.

To Reproduce

Here is see the button story:

https://stackblitz.com/edit/github-xxncqv?file=src/stories/button.component.ts

It's very simple you just need a mixin and a component with styles interpolating js with css. Then if you look for the generated styles you see that the scss compilation didn't took place

System

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 109.0.1
    Safari: 16.4
  npmPackages:
    @storybook/addon-actions: ~7.0.7 => 7.0.7
    @storybook/addon-essentials: ~7.0.7 => 7.0.7
    @storybook/addon-interactions: ~7.0.7 => 7.0.7
    @storybook/addon-links: ~7.0.7 => 7.0.7
    @storybook/addon-mdx-gfm: ~7.0.7 => 7.0.7
    @storybook/angular: ~7.0.7 => 7.0.7
    @storybook/testing-library: ~0.1.0 => 0.1.0

Additional context

No response

[nicolae536]

If maybe I configured something wrong let me know. But it seems reproducible in stackblitz

[Rupesh-Lal]

Hi @nicolae536,

After investigating your issue and experimenting with some workarounds, it seems there may be a configuration problem. I attempted to reproduce the bug, and in my case, it's working fine. You can take a look at the working example here: https://github.com/Rupesh-Lal/storybook-demo/tree/master.

Steps to Fix

1. Ensure that Sass is installed. If not, you can install it using the command: npm install sass --save.
2. The code used to apply SCSS rules seemed to be causing issues. Unfortunately, I don't have specific details on why. To resolve this, REMOVE the following code from your main.js:

// REMOVE THIS

config.module.rules.push({
  test: /\.scss$/,
  use: ["style-loader", "css-loader", "sass-loader"],
  include: path.resolve(__dirname, "../"),
});

// REMOVE THIS

References

https://storybook.js.org/recipes/sass https://stackoverflow.com/questions/67194194/import-scss-file-is-not-working-inside-storybook-file https://github.com/storybookjs/storybook/issues/12464