priyabhatt13/gatsby-plugin-module-local-ident-name

Adds support for specifying CSS Modules classnames in Gatsby's development mode

gatsby-plugin-module-local-ident-name

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: