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
- 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:
The same HTML after enabling the plugin with the above config: