Unable to load CSS correctly for external library in Storybook Angular

I am using Angular with Projects style setup (with --create-application=false) and I just cannot get Storybook to load any CSS from external libraries like Angular Material. The project component scss compiles and works fine but none of the external libraries can load any css.

Here is my storybook/main.js -

const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

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

    // Return the altered config
    return config;
  }
}

Here is my project structure -

Can someone please point out what the problem is?