webpack/storybook config

config.js

import { configure } from '@storybook/react'

function loadStories() {
    require('../stories/index.js')
    // You can require as many stories as you need.
}

configure(loadStories, module)

webpack.config.js

// Heavily borrowed from aw-mono\packages\ns-web-core-ui\.storybook\webpack.config.js

const autoprefixer = require('autoprefixer')
const ExtractTextPlugin = require('mini-css-extract-plugin')
const cssFilename = 'static/css/[name].css'

module.exports = (config, env) => {
    // Extend defaultConfig as you need.

    // For example, add typescript loader:
    config.module.rules.push(
        {
            test: /\.(ts|tsx)$/,
            loader: require.resolve('ts-loader')
        },
        {
            test: /\.css$/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                        sourceMap: true
                    }
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9' // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009'
                            })
                        ]
                    }
                }
            ]
        },
        {
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            use: {
                loader: require.resolve('file-loader'),
                options: {
                    name: 'images/[name].[hash:8].[ext]'
                }
            }
        },
        {
            test: /\.(woff|woff2|ttf|eot)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10240,
                    name: 'fonts/[name]-[hash:7].[ext]'
                }
            }
        },
        // for .less files:
        {
            test: /\.less$/,
            use: [
                { loader: 'style-loader', options: { sourceMap: true } },
                { loader: 'css-loader', options: { sourceMap: true } },
                {
                    loader: 'less-loader',
                    options: {
                        sourceMap: true
                    }
                }
            ]
        }
    )

    config.resolve.extensions.push('.ts', '.tsx', '.jsx')
    config.plugins.push(new ExtractTextPlugin(cssFilename))

    config.plugins = config.plugins.filter(
        plugin => plugin.constructor.name !== 'UglifyJsPlugin'
    )

    return config
}