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 : 
See the source folders organization :
I would be willing to submit a PR to fix this issue
Please provide the environment you discovered this bug in.
Node : v22.15.1
Angular :
Angular AnalogJS :
Here is my main.ts configuration :
The angular.json part relative to build-storybook :
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:
What works
When running start-storybook:
The problem
When running build-storybook (static build):
Expected behavior
SCSS should be processed the same way as:
What I tried
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
Other information
Here is the resultat on my storybook-static/assets/sr-button.xyz.js file :
See the source folders organization :
I would be willing to submit a PR to fix this issue