Skip to content

SCSS from Angular libraries not preprocessed when building Storybook with Vite #2018

@spawnrider

Description

@spawnrider

Please provide the environment you discovered this bug in.

Node : v22.15.1
Angular :

  • "@angular/cli": "^21.0.3"
  • "@angular/common": "^21.0.5",
    Angular AnalogJS :
  • "@analogjs/storybook-angular": "^2.2.0"

Here is my main.ts configuration :

import type { StorybookConfig } from '@analogjs/storybook-angular';
import { UserConfig, mergeConfig } from 'vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: ['@storybook/addon-docs', '@storybook/addon-designs', '@storybook/addon-a11y'],
  framework: {
    name: '@analogjs/storybook-angular',
    options: {},
  },
  staticDirs: ['../src/shared/assets', './assets'],

  async viteFinal(config: UserConfig) {
    return mergeConfig(config, {
      plugins: [viteTsConfigPaths()],
    });
  },
};

export default config;

The angular.json part relative to build-storybook :

        "build-storybook": {
          "builder": "@analogjs/storybook-angular:build-storybook",
          "options": {
            "configDir": ".storybook",
            "experimentalZoneless": true,
            "compodoc": true,
            "compodocArgs": [
              "-e",
              "json",
              "-d",
              "."
            ],
            "outputDir": "storybook-static",
            "stylePreprocessorOptions": {
              "loadPaths": [
                "src/shared/styles",
                "src/components/**/"
              ]
            }
          }
        }

Which area/package is the issue in?

storybook-angular

Description

I recently switched Storybook’s builder from Webpack to Vite in an Angular component libraries monorepo.

The setup is:

  • Angular
  • Multiple libraries with multiple entry points (ng-packages)
  • Storybook builder: Vite

What works

When running start-storybook:

  • Components render correctly
  • Styles are applied correctly
  • SCSS is properly processed

The problem

When running build-storybook (static build):

  • Components still render correctly
  • SCSS from Angular components is NOT preprocessed
  • Raw SCSS is injected directly into the generated assets
  • Variables, nesting and mixins remain uncompiled

Expected behavior

SCSS should be processed the same way as:

  • start-storybook
  • ng build
  • Storybook with the Webpack builder

What I tried

  • Custom Vite css.preprocessorOptions
  • Custom Vite plugins
  • Storybook viteFinal configuration
  • Trying to align with Angular CLI / ng-packagr behavior

None of these changes seem to affect how SCSS from Angular libraries is handled during the static build.

Question
Is this a known limitation of Storybook + Vite when used with Angular libraries and ng-packagr (secondary entry points)?
Is there a specific configuration required to ensure SCSS preprocessing is applied during build-storybook?
Any guidance or minimal working example would be appreciated.

Please provide the exception or error you saw

My angular component is rendered without the right style (if it using SCSS).

Other information

Here is the resultat on my storybook-static/assets/sr-button.xyz.js file : Image

See the source folders organization :

Image

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions