Actualmente estoy trabajando en un proyecto en el que estamos construyendo nuestra aplicación en varios estilos. Nuestros componentes tienen un archivo base component.scss y múltiples hojas de estilo para el estilo específico del proyecto. Con una variable de entorno le hacemos saber a angular qué hojas de estilo compilar. Así que para cada componente existen las siguientes hojas de estilo: button.component.scss, button.component.stylea.scss y button.component.styleb.scss. En el componente mismo, usamos la variable de entorno para declarar el archivo específico a usar:

 @Component({ selector: 'button[app-button]', templateUrl: 'button.component.html', // Below should become button.component.stylea.scss styleUrls: ['button.component' + environment.componentScssExtension] })

En nuestro archivo de entorno, tenemos:

 componentScssExtension: '.stylea.scss',

Para que Angular construya el proyecto, esto funciona bien. Tenemos dos comandos npm para elegir qué configuración de compilación usar (ya sea stylea o styleb). Sin embargo, cuando se ejecuta StorybookJS, parece que la variable de entorno no se usa y obtenemos un componente de botón sin estilo, aunque configuramos la configuración angular para que Storybook sepa qué archivos de entorno usar:

 "storybook": { "builder": "@storybook/angular:start-storybook", "options": { "browserTarget": "APP:build", "styles": [ "src/styles.scss" ] }, "configurations": { "stylea": { "browserTarget": "APP:build:dev-stylea" }, "styleb": { "browserTarget": "APP:build:dev-styleb" } } }

En dev-stylea y dev-styleb, decimos qué entorno usar.

 "dev-stylea": { "assets": [ "src/assets", "src/assets/images/favicon.ico" ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.stylea.ts" } ], "styles": [ "src/styles.scss", "src/styles/stylea/stylea.scss" ] },

StorybookJS no da errores al compilar y vemos el botón, pero la configuración dinámica de styleUrls en nuestro componente de esta manera ( styleUrls: ['button.component' + environment.componentScssExtension] ) no parece funcionar para StorybookJS. ¿Alguien tiene una solución?