Webpack Config for CSS Module and Sass Support in a Storybook for a Gatsby Project

webpack.config.js

// The require statement and the block within module.exports should be added to 
// ./storybook/webpack.config.js

// Written for Gatsby v2 Storybook v5

const path = require("path");

module.exports = ({ config }) => {

  // Update for SASS / CSS Modules support - minor adjustments to snippet 
  // from https://github.com/storybookjs/storybook/issues/6055#issuecomment-535450942
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
    exclude: /\.module\.scss$/
  })
  config.module.rules.push({
    test: /\.module\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1,
          camelCase: 'dashesOnly', // Without this, styles with dashes will fail.
          localIdentName: '[name]--[local]--[hash:base64:5]' // This will result in class naming that matches what is used when running Gatsby develop.
        }
      },
      'sass-loader'
    ]
  })
  
  // For a gatsby project, you'll also likely need to make the webpack adjustments outlined here: 
  // https://www.gatsbyjs.org/docs/visual-testing-with-storybook/

  return config
}