Take a deep dive into our latest launch, the Valhalla Content Hub!

ContactSign Up for Free
Community Plugin
View plugin on GitHub


For Gatsby v1 only. Check issues for how to implement this behaviour in Gatsby v2.

Adds support for specifying CSS Modules classnames in Gatsby’s development mode. No changes are made to Gatsby’s production builds.


yarn add gatsby-plugin-module-local-ident-name

How to use

  1. Include the plugin in your gatsby-config.js file.
  2. Specify a new localIdentName for your class names
  3. Want to include SASS files? Set includeSASS to true
// in gatsby-config.js
plugins: [
    resolve: `gatsby-plugin-module-local-ident-name`,
    options: {
      localIdentName: "[folder]-[local]-[hash:base64:5]",
      includeSASS: true //default false

See the loader-utils docs for a list of valid tokens that can be used in localIdentName.

Here’s an example of HTML output using Gatsby’s default CSS Modules config:

default classes

The same HTML after enabling the plugin with the above config:

modified classes

© 2022 Gatsby, Inc.