Describe the bug

I've installed storybook in my NX monorepository. Facing issue on storybook compilation with preview.ts. I just want to import my style.scss file properly. somehow I'm getting below error on compilation.

ERROR in ./apps/storybook-app/.storybook/styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./apps/storybook-app/.storybook/styles.scss) 10:36-65
Module not found: Error: Can't resolve '/' in '/Users/dharmasheelana/Documents/LLA-MONOREPO-MIGRATION-feat-sb-installation/apps/storybook-app/.storybook'
 @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./apps/storybook-app/.storybook/styles.scss 8:6-153 20:17-24 24:7-21 50:25-39 51:36-47 51:50-64 55:6-65:7 56:54-65 56:68-82 62:42-53 62:56-70 64:21-28 75:0-123 75:0-123 76:22-29 76:33-47 76:50-64 53:4-66:5
 @ ./apps/storybook-app/.storybook/preview.ts 1:0-60
 @ ./storybook-config-entry.js 5:1841-1968 24:2-29:4 24:1835-29:3

preview compiled with 1 error

main.ts

import type { StorybookConfig } from '@storybook/angular';
import path from 'path';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  framework: '@storybook/angular',
  core: {
    builder: {
      name: '@storybook/builder-webpack5',
      options: {
        fsCache: true,
        lazyCompilation: true,
      },
    },
  },
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/addon-docs',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    '@storybook/addon-webpack5-compiler-babel',
  ],
  webpackFinal: (config: any) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    config.module.rules.push(
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, 'apps/storybook-app/.storybook'),
        ],
      },
      {
        test: /\.(scss|sass)$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: [
          path.resolve(__dirname, 'node_modules'),
          path.resolve(__dirname, 'apps/storybook-app/.storybook'),
          path.resolve(__dirname, '../src'),
        ],
        exclude: [
          path.resolve(__dirname, '../src/styles.scss'),
        ],
      }
    );

    return config;
  },
};

**preview.ts**

import '!style-loader!css-loader!sass-loader!./styles.scss';

style.scss

import '!style-loader!css-loader!sass-loader!./styles.scss';

webpack.config.js

const copyPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const path = require('path');
module.exports = async ({ config, mode }) => {
  const copyAssets = new copyPlugin({
    patterns: [
      {
        from: 'libs/shared/ui-library/src/lib/styles/common/assets',
        to: 'common/assets',
      },
      {
        from: 'libs/shared/ui-library/src/lib/styles/vtr/assets',
        to: 'vtr/assets',
      },
    ],
  });

  const tsPaths = new TsconfigPathsPlugin({
    configFile: path.resolve(__dirname, '../.storybook/tsconfig.json'),
  });
  config.plugins.push(copyAssets);
  config.resolve.extensions.push('.ts');
  config.resolve.plugins
    ? config.resolve.plugins.push(tsPaths)
    : (config.resolve.plugins = [tsPaths]);
  return config;
};

Reproduction link

no link

Reproduction steps

• No response*

System

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 18.18.1 - /usr/local/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn <----- active
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @storybook/addon-a11y: ^8.1.11 => 8.2.0 
    @storybook/addon-actions: ^8.1.11 => 8.2.0 
    @storybook/addon-essentials: ^8.1.11 => 8.2.0 
    @storybook/addon-interactions: ^8.1.11 => 8.2.0 
    @storybook/addon-links: ^8.1.11 => 8.2.0 
    @storybook/addon-storysource: ^8.1.6 => 8.2.0 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/angular: ^8.1.11 => 8.2.0 
    @storybook/builder-webpack5: ^8.1.11 => 8.2.0 
    @storybook/cli: ^8.1.6 => 8.2.0 
    @storybook/core-server: ^8.1.11 => 8.2.0 
    @storybook/manager-webpack5: ^6.5.17-alpha.0 => 6.5.17-alpha.0 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    storybook: ^8.1.11 => 8.2.0

Additional context

• No response*