@ storybook / angular無法在故事索引上加載scss文件

Question

我一直在嘗試將我的故事書用於我的有角項目，並且我使用了本指南https://storybook.js.org/basics/guide-angular/我為webpack使用了推薦的config，用於sass loader的scss文件和與之相關的scss文件到項目的工作正常，但是如果我在故事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以檢查故事書的運行。

我做錯了什么？

Answer 1

所有樣式導入都必須在組件元數據中（特別是在樣式或styleUrls字段中）。 您正在嘗試將樣式文件導入為js文件，這是錯誤的。

Answer 2

您正在嘗試從打字稿中導入scss文件。 您必須在您的scss中包括它。

請刪除 ：

//This scss it is not loaded
import '../src/styles.scss';

在您的scss文件中添加：

@import "styles.scss";

在您angular.json中添加：

"styles": [
     "src/styles.scss",
 ],
 "stylePreprocessorOptions": {
      "includePaths": [
          "src/" // maybe not required in your case
        ]
  },

在您的.storybook / webpack.config.js中，請嘗試：

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["sass-loader"],
        include: path.resolve(__dirname, "../src/")
      }
    ]
  }
};

否則，有可能添加別名，如Xdecus在這里所說的https://github.com/storybooks/storybook/issues/3814#issuecomment-401756776

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            styles: path.resolve(__dirname, '../src/')
        }
    }
};

Answer 3

我假設像我一樣，您正在尋找一種將SASS文件中的全局樣式加載到Angular Storybook中的方法。 我知道自您提出問題以來已經有一段時間了，但是我在尋找一種解決方案時遇到了這個解決方案： https : //github.com/storybookjs/storybook/issues/6364#issuecomment-485651328 。

基本上，您可以在Storybook配置文件中加載全局樣式。 但是，您需要在導入路徑中使用內聯Webpack加載程序，以便Storybook可以正確加載它們。

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

那對我有用。 最后，我不必費心使用自定義的webpack配置。 希望能解決您的問題！