Nuxt Storybook webpack

webpack.config.js

const path = require('path');
const { getWebpackConfig } = require('nuxt')

module.exports = async ({ config, mode }) => {
  const isDev = mode === 'development'

  // Load webpack config for Nuxt
  const nConfig = await getWebpackConfig('client', {
    rootDir,
    for: isDev ? 'dev' : 'build',
  })

  // Chery-pick Nuxt plugins
  const NPlugins = [
    'WebpackBarPlugin',
    'DefinePlugin' // Provides process.env
  ]
  config.plugins.push(...nConfig.plugins.filter(p => NPlugins.includes(p.constructor.name)))
  config.plugins = config.plugins.filter(p => p.constructor.name !== 'ProgressPlugin')

  // Aliases
  config.resolve.alias = {
    ...nConfig.resolve.alias,
    ...config.resolve.alias,
  }

  // Return the altered config
  return config;
};

// Custom Webpack configuration for Storybook
const path = require('path')
const { getWebpackConfig } = require('nuxt')
const merge = require('webpack-merge')

const rootDir = path.resolve(__dirname, '..', 'src')

module.exports = async ({ config, mode }) => {
  const isDev = mode === 'development'

  const fullNuxtConfig = await getWebpackConfig('client', {
    rootDir,
    for: isDev ? 'dev' : 'build',
  })

  // Chery-pick Nuxt plugins
  const NuxtPlugins = [
    'ContextReplacementPlugin', // For moment locale's (not needed perse)
    'DefinePlugin', // Provides process.env
    'ExtractCssChunksPlugin', // Because build.extractCSS: true
    'WebpackBarPlugin',
  ]

  // Chery-pick Nuxt rules
  const NuxtRules = [
    'blah.css',
    'blah.gql',
    'blah.sass',
    'blah.scss',
    'blah.svg'
  ]

  // Prefer using Nuxt's css rule
  config.module.rules = config.module.rules.filter(r => !r.test || !r.test.test('blah.css'))

  const nuxtConfig = {
    module: {
      rules: fullNuxtConfig.module.rules.filter(r => r.test && NuxtRules.some(nr => r.test.test(nr))),
    },
    plugins: fullNuxtConfig.plugins.filter(p => NuxtPlugins.includes(p.constructor.name)),
    resolve: fullNuxtConfig.resolve,
  }

  const extraConfig = {
    resolve: {
      alias: {
        // Override sass variables because we want
        // to change the css grid breakpoints
        '~/assets/sass/_variables': path.resolve(
          __dirname,
          'sass/_variables.scss'
        ),
        utils: path.resolve(__dirname, 'src'), // helpers for stories
      }
    }
  }

  return merge(config, nuxtConfig, extraConfig)
}