Attempting to get global styles included in angular 12 and Nx

[parky128]

I am trying to get an Nx 12 workspace running storybook for some angular components I am authoring.

I am facing an issue when trying to include global scss files, I keep getting the following error.

    SassError: SassError: expected "{".
      ╷
    2 │       import API from "!../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
      │                                                                                                              ^

Reading the docs, for angular versions prior to 13 believe I need to configure loaders like so in my storybook main.js:

    config.module.rules.push({
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
                include: path.resolve(__dirname, '../'),
              });

I have also tried to include via imports in preview.js like

    import '!style-loader!css-loader!sass-loader!../src/styles/global.scss';
    import '!style-loader!css-loader!sass-loader!../../ui-css-kit/scss/index.scss';

I cannot figure out what is causing the problem.

This is easy to see in this repo here, after running npm install just run nx run c-design-patterns:storybook