Community Plugin

gatsby-plugin-module-local-ident-name

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.

Install

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

How to use

Include the plugin in your gatsby-config.js file.
Specify a new localIdentName for your class names
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