Search code examples
angularstorybook

I got blank page when I used Storybook for Angular?

How could I use storybook for angular?

I followed the main guide but still blank when I choose any component https://storybook.js.org/basics/guide-angular/

enter image description here

Updates: I convert my angular to use SCSS instead of SASS and it works. but the webpack.config.js in .storybook doesn't handle images or fonts.

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

Solution

  • The Owners of storybook library solved it in version v3.4.0-alpha.5.

    The whole issue here:https://github.com/storybooks/storybook/issues/2823