angular - 当我使用 Storybook for Angular 时出现空白页？

Question

我如何将故事书用于角度？

我遵循了主要指南，但当我选择任何组件时仍然空白 https://storybook.js.org/basics/guide-angular/

更新： 我将我的角度转换为使用 SCSS 而不是 SASS，它可以工作。但webpack.config.jsin.storybook不处理图像或字体。

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

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

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