当我使用 Storybook for Angular 时出现空白页？答案

【问题标题】：I got blank page when I used Storybook for Angular?当我使用 Storybook for Angular 时出现空白页？
【发布时间】：2018-07-03 03:10:10
【问题描述】：

我如何将故事书用于 Angular？

我遵循了主要指南，但当我选择任何组件时仍然空白 https://storybook.js.org/basics/guide-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;
};

【问题讨论】：

标签： angular storybook

【解决方案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;
};

【讨论】：

它通过将 sass 更改为 scss ad bootstrap 到 3 得到了修复，是的，我遵循了类似的方法
如何处理图片和字体？

【解决方案2】：

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

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

【讨论】：