I'm trying to configure Storybook for Angular (v13.0.0). Everything is working (I can write stories for basic components), except that I cannot find a way to make Angular Material styles work. What I have done so far:
- Include the style sheets added by Angular Material in the page header (for MatIcon and also the font) => this is working as expected
- Add the
@storybook/preset-scssto my dependencies and also to the.storybook/main.jsaddons (as explained in the README) - Make sure that the
angular.jsonincludes mystyles.scssfile
This is a brand new project and I haven't done anything to the style sheet that has been generated by Angular Material (I'm using a custom theme). Everything is all right when I use my components in the web application (styles are correctly applied), but the storybook components cannot load Angular Material styles. When I open the console, I have a warning saying that the Angular Material core cannot be found, and therefore I have partial styles applied and I can't use the components correctly. I never used Storybook before, so I'm not sure if the issue is related to the custom theme or not; the solutions I find on Stack Overflow and GitHub all mention the prebuilt themes.
What am I missing?