Angular9 + NX + Storybook : Why are my Scss styles getting ignored in Storybook ? No errors

Question

Hi has anyone got Angular9+ in an NX workspace working with Storybook using Scss / Sass?

Are there any working guides? It is not working for me so I am probably doing something wrong. (new to Storybook & NX) The app works fine - the Sass is used with no problems, but is ignored in Storybook. I have followed many examples but the styles are not getting applied.

I am using the NX App-shell and Libs methodology. Advice from others online is that Libraries do not use Styles imports in Angular.json

I have tried the solutions from here (but not working for me) https://github.com/storybookjs/storybook/issues/5684

Answer 1

You need to add a link to your scss in your.storybook/config.js file using the sass-loader like:

import '!style-loader!css-loader!sass-loader!../../shared/styles/src/lib/main.scss';

reference: https://github.com/storybookjs/storybook/issues/6364#issuecomment-485651328