I am trying to set up an angular library with storybook and I keep running into stylesheet issues (ng g library reusable-components) but it can’t compile the scss and I keep getting an error message:

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
expected "{".
  ╷
2 │       import API from "!../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                           ^
  ╵
  projectsreusable-componentssrclibbuttonbutton.scss 2:107  root stylesheet
ERROR in ./projects/reusable-components/src/common/_brand.scss 
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
expected "{".
  ╷
2 │       import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                        ^
  ╵
  projectsreusable-componentssrccommon_brand.scss 2:104  root stylesheet

Here is my angular.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "reusable-components": {
      "projectType": "library",
      "root": "projects/reusable-components",
      "sourceRoot": "projects/reusable-components/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/reusable-components/ng-package.json"

          },

          "configurations": {
            "production": {
              "tsConfig": "projects/reusable-components/tsconfig.lib.prod.json"
            },
            "development": {
              "tsConfig": "projects/reusable-components/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "tsConfig": "projects/reusable-components/tsconfig.spec.json",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ]
          }
        },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": "projects/reusable-components/.storybook",
            "browserTarget": "reusable-components:build",
            "compodoc": false,
            "port": 6006
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "configDir": "projects/reusable-components/.storybook",
            "browserTarget": "reusable-components:build",
            "compodoc": false,
            "outputDir": "storybook-static"
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

ng-package.json

  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/reusable-components",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "src/common"
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "."
      ]
    },
    "flatModuleFile": "",
    "cssUrl": "none",
    "sass": {}
  }
}

main.ts

import type { StorybookConfig } from "@storybook/angular";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|mjs|ts)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-styling"
  ],
  framework: {
    name: "@storybook/angular",
    options: {},
  },
  webpackFinal: async (config, {configType}) => {
    // Add support for SCSS files
    config.module?.rules?.push({
      test: /.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: /src/,
    });
    return config;
  }
};
export default config;

preview.ts

import type { Preview } from "@storybook/angular";
import '@storybook/addon-styling';
import '../src/common/_brand.scss'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

Can anyone spot where my issue is? I can’t seem to resolve the issue with the solutions I foumd