Как загрузить файлы Global s css в сборник рассказов для приложения angular?

Question

Я пытаюсь загрузить собственный файл глобального стиля, theme-default.s css в сборник рассказов. Хотя мои компоненты загружаются в сборник рассказов, но стили не применяются. Я следовал этому руководству официальные документы Storybook настраиваемой конфигурации веб-пакета. (Я не очень хорошо знаком с webpack)

вот мой .storybook / main. js file

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//import '!style-loader!css-loader!../src/stories/stories.scss'; // for scss
module.exports = {
  stories: ['../src/**/*.stories.ts'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-notes'],
  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;
  }
};

Это дает мне следующую ошибку

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of D:\code2\mawani\mawani-angular-client\dpd-billing\src\app\app.component.scss
>> var api = require("!../../node_modules/style-loader/dist/runtime/injectStyle
   ^

 @ ./src/app/app.component.ts 45:18-49 45:61-92 45:104-135 45:147-178
 @ ./src/app/app.module.ts
 @ ./src/stories/containers/SearchBar.stories.ts
 @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.ts[\\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss

ERROR in ./src/app/modules/feature/public/page-not-found/page-not-found.component.scss
Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'
        on line 1 of D:\code2\mawani\mawani-angular-client\dpd-billing\src\app\modules\feature\public\page-not-found\page-not-found.component.scss
>> var api = require("!../../../../../../node_modules/style-loader/dist/runtime
   ^

 @ ./src/app/modules/feature/public/page-not-found/page-not-found.component.ts 12:18-60 12:72-114 12:126-168 12:180-222
 @ ./src/app/app.module.ts
 @ ./src/stories/containers/SearchBar.stories.ts
 @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.ts[\\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true ./src/theme-default.scss ./src/styles.scss

   ^

Затем я попытался использовать синтаксис встроенного загрузчика, как упоминалось в этом комментарии Вот как выглядит мой .storybook / preview. js

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

Внутри _common.s css

@import '../src/theme-default.scss';
@import '../src/styles.scss';

Хотя это не дает никаких ошибок, но стили все равно не применяются!

Вот мой angular. json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xyz": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/xyz",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/theme-default.scss",
              "src/styles.scss"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "xyz:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "xyz:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "xyz:build"
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "xyz:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "xyz:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "xyz",
  "cli": {
    "analytics": ""
  }
}

I также пробовал использовать этот подход sass-resources-loader

Я провел много проб и ошибок, но не смог найти решения. Любая помощь будет оценена. Спасибо!