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:

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