当我使用Storybook for Angular时,我得到了空白页?

时间:2018-01-24 06:40:26

标签: angular storybook

我怎么能用故事书做角度?

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

enter image description here

更新 我转换我的角度使用SCSS而不是SASS,它的工作原理。 但webpack.config.js中的.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;
};

enter image description here

2 个答案:

答案 0 :(得分: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;
};

答案 1 :(得分:1)

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

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