SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

ContactSign Up
Community Plugin
View plugin on GitHub

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

  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

© 2023 Gatsby, Inc.