overleaf/services/web/.storybook/main.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// NOTE: must be set before webpack config is imported
process.env.SHARELATEX_CONFIG = path.resolve(
  __dirname,
  '../config/settings.webpack.js'
)

const customConfig = require('../webpack.config.dev')

module.exports = {
  stories: [
    '../frontend/stories/**/*.stories.js',
    '../modules/**/stories/**/*.stories.js',
  ],
  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
  webpackFinal: storybookConfig => {
    // Combine Storybook's webpack loaders with our webpack loaders
    const rules = [
      // Filter out the Storybook font file loader, which overrides our font
      // file loader causing the font to fail to load
      ...storybookConfig.module.rules.filter(
        rule => !rule.test.toString().includes('woff')
      ),
      // Replace the LESS rule, and the CSS rule which conflicts with the built-in CSS loader
      ...customConfig.module.rules.filter(
        rule =>
          !rule.test.toString().includes('less') &&
          !rule.test.toString().includes('css')
      ),
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
      },
    ]

    // Combine Storybook's webpack plugins with our webpack plugins
    const plugins = [...storybookConfig.plugins, ...customConfig.plugins]

    return {
      ...storybookConfig,
      module: {
        ...storybookConfig.module,
        rules,
      },
      plugins,
    }
  },
}