storybook didn't load styles

[SimonCheung1989]

Hi, when i use
npm run storybook
and open browser with http://localhost:6006, I can see the stories that i wrote in my code, but all of the stories has no styles, i checked the page resources with F12, the page didn't load any css file, am i missed some configurations?

require('babel-register');
let mainWebpackConfig = require('../webpack/webpack.storybook.config').default;

// Export a function. Accept the base config as the only param.
module.exports = function(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.

  let baseLoaders = storybookBaseConfig.module.loaders;
  let customLoaders = mainWebpackConfig.module.loaders;
  storybookBaseConfig.module.loaders = baseLoaders.concat(customLoaders);

  //if not cover the default plugins, it will throw some error message.
  let basePlugins = storybookBaseConfig.plugins;
  let customPlugins = mainWebpackConfig.plugins;
  //remove CaseSensitivePathsPlugin
  basePlugins.splice(3, 1);
  storybookBaseConfig.plugins = basePlugins.concat(customPlugins);
  //for some alias folder
  storybookBaseConfig.resolve = mainWebpackConfig.resolve;

  // storybookBaseConfig.output = mainWebpackConfig.output;
  Object.assign(storybookBaseConfig.entry, mainWebpackConfig.entry);
  // Return the altered config
  return storybookBaseConfig;
};

this is my webpack.config.js inside .storybook

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import StyleLintPlugin from 'stylelint-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import config from './config';

const paths = config.UTILS_PATH;

const webpackConfig = {
    module: {},
    plugins: [
        new StyleLintPlugin(),
        new ExtractTextPlugin('wealth.css', {
            allChunks: true
        })
    ]
};

const APP_ENTRY_PATH = `${paths.base(config.APP_PATH)}/${config.APP_MAIN}`;
const EXAMPLE_ENTRY_PATH = `${paths.base(config.EXAMPLE_PATH)}/${config.EXAMPLE_MAIN}`;

webpackConfig.entry = {
    wealth: [APP_ENTRY_PATH, EXAMPLE_ENTRY_PATH]
};

webpackConfig.resolve = config.RESOLVE;

webpackConfig.output = {
    filename: `[name].js`,
    path: paths.base(config.BUILD_PATH),
    libraryTarget: 'umd'
};

// Webpack loader settings

let cssLoader = ['css-loader?', 'modules', 'importLoaders=1', 'minimize'];
cssLoader = cssLoader.join('&');

webpackConfig.module.loaders = [{
    test: /\.(js|jsx)$/,
    include: [paths.base(config.APP_PATH), paths.base(config.EXAMPLE_PATH)],
    exclude: /node_modules/,
    loaders: ['babel-loader', 'eslint-loader']
}];

const styleLoaders = [
    {
        test: /\.scss$/,
        include: [paths.base(config.APP_PATH), paths.base(config.EXAMPLE_PATH)],
        exclude: /node_modules/,
        loaders: [
            'style',
            cssLoader,
            'postcss-loader',
            'sass'
        ]
    },
    {
        test: /\.css$/,
        include: [paths.base(config.APP_PATH), paths.base(config.EXAMPLE_PATH)],
        exclude: /node_modules/,
        loaders: [
            'style',
            cssLoader,
            'postcss-loader'
        ]
    }
];

const fontLoaders = [
    {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=10000&name=fonts/[name].[ext]'
    }
];

const imageLoader = [
    {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        exclude: /node_modules/,
        loader: 'url-loader?name=img/img-[hash:6].[ext]&limit=5000'
    }
];

const jsonLoaders = [
    {
        test: /\.json$/,
        loaders: ['json-loader']
    }
];

webpackConfig.module.loaders = [
    ...webpackConfig.module.loaders,
    ...styleLoaders,
    ...fontLoaders,
    ...imageLoader,
    ...jsonLoaders
];

webpackConfig.module.loaders.filter((loader) =>
    loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
    const [first, ...rest] = loader.loaders;
    loader.loader = ExtractTextPlugin.extract(first, rest.join('!'));
});

export default webpackConfig;

this is my ../webpack/webpack.storybook.config.js

[shilman]

@SimonCheung1989 how do you load your CSS in the app? Is it loaded per-component or at the page-level?

[SimonCheung1989]

@shilman I use import '**.scss' per-component

[shilman]

this is a pretty complex config. have you tried doing the bare minimum config, e.g. something like this:

const path = require('path');

const config = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css',
        include: path.resolve(__dirname, '../'),
      },
      {
        test: /\.yml$/,
        loader: 'json!yaml',
        include: path.resolve(__dirname, '../data'),
      },
      {
        test: /\.s[ac]ss$/,
        loader: 'style!css!sass?includePaths[]=./node_modules',
        include: path.resolve(__dirname, '../src'),
      },
      {
        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
        loader: 'file',
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

module.exports = config;

NOTE: this is webpack1, assuming you're using a storybook 2.x version

[SimonCheung1989]

Finally i found i missed a plugin 'HtmlWebpackPlugin', but when i add this plugin to my custom webpack.config.js, and run storybook, it shows this error message

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

[shilman]

Hmm seems like you have a very complicated config. Have you thought about using create-react-app or something that just works out of the box?

[SimonCheung1989]

@shilman Hi, shilman, i had found the problem, seems i can't use 'ExtractTextPlugin' when i use storybook, so i removed this plugin from my webpack config, then it's works fine, thank for your reply

[shilman]

Great @SimonCheung1989 . Glad to hear you got it working! Closing this for now.

[joscha]

This issue has been fixed in 3.1.7 via #1363 - extract-text-webpack-plugin can now be used again in a standard storybook build.