javascript - @storybook/angular はストーリー インデックスに scss ファイルを読み込めません

Question

私はAngularプロジェクトにストーリーブックを使用しようとしており、このガイドを使用していますhttps://storybook.js.org/basics/guide-angular/ scssファイルのsassローダーと関連するscssファイルのwebpackに推奨される構成を使用しますプロジェクトへの接続は正常に機能しますが、ストーリーの index.ts ファイルに scss ファイルをインポートすると、このファイルは読み込まれません。

ストーリー/index.ts

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
import { VideoPosterComponent } from '../src/app/modules/ui-common/video-poster/video-poster.component';
//This scss it is not loaded
import '../src/styles.scss';

storiesOf('Video Poster component', module)
  .add('Video Poster with author data', () => ({
    component: VideoPosterComponent,
    props: {
        title: "Cinemagraph With Custom title",
        subtitle: "This is a custom subtitle!"
    }
  }))
  .add('Video Poster without author data', () => ({
    component: VideoPosterComponent,
    props: {}
  }));

.storybook/webpack.config.js (ここで推奨 --> https://storybook.js.org/basics/guide-angular/#configure-style-rules )

const genDefaultConfig = require('@storybook/angular/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  // Overwrite .css rule
  const cssRule = config.module.rules.find(rule => rule.test && rule.test.toString() === '/\\.css$/');
  if (cssRule) {
    cssRule.exclude = /\.component\.css$/;
  }

  // Add .scss rule
  config.module.rules.unshift({
    test: /\.scss$/,
    loaders: ['raw-loader', 'sass-loader'],
  });

  return config;
};

そして、私のコンポーネントのscssファイルは問題なくロードされました

src/app/modules/ui-common/video-poster/video-poster.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-video-poster',
  templateUrl: './video-poster.component.html',
  styleUrls: ['./video-poster.component.scss'] // this were loaded without problems
})
export class VideoPosterComponent implements OnInit {
  private hostUrl = 'https://s3-eu-west-1.amazonaws.com/video.gallereplay.com/portfolio/clients';
  private baseUrl = `${this.hostUrl}/jaegermeister/Cinemagraph_plain/1920x1080`;

  @Input()
  public videoUrls = {
    poster: `${this.baseUrl}/cinemagraph.jpg`,
    mp4: `${this.baseUrl}/cinemagraph.mp4`,
    webm: `${this.baseUrl}/cinemagraph.webm`,
  }
  @Input() public title = 'Custom Cinemagraph Productions';
  @Input() public subtitle = 'Exclusive Content for Businesses';

  constructor() { }

  ngOnInit() {
  }

}

リポジトリ: https://github.com/gpincheiraa/storybook-components-sample

npm install && npm run storybookストーリーブックの実行を確認するために実行します。

私が間違っていることは何ですか??