Angular 使用 Storybook 时出现空白页？

Question

我如何为 angular 使用故事书？

我按照主要指南操作，但是当我选择任何组件时仍然是空白 https://storybook.js.org/basics/guide-angular/

更新： 我将我的 angular 转换为使用 SCSS 而不是 SASS 并且它有效。但是 .storybook 中的 webpack.config.js 不处理图像或字体。

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;
};

Answer 1

你有没有遵循 webpack 配置？

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, 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
  storybookBaseConfig.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"],
    include: path.resolve(__dirname, '../')
  });

  // Return the altered config
  return storybookBaseConfig;
};

Answer 2

storybook 库的所有者在 v3.4.0-alpha.5 版本中解决了它。

整个问题在这里：https://github.com/storybooks/storybook/issues/2823

Angular 使用 Storybook 时出现空白页？

I got blank page when I used Storybook for Angular?

angular

storybook