Gatsby Plugin Typescript [S]CSS Modules

This GatsbyJS plugin allows for using TypeScript along side SCSS Modules.

It requires you to name your css files as page.module.css, but from there you can import them into TS files.

import * as styles from "./page.module.css";

The way this works is, under the covers the https://github.com/Jimdo/typings-for-css-modules-loader WebPack plugin reads the CSS file and generates a .d.ts file alongside your css.

Installing

First, install the plugin...

npm i gatsby-plugin-typescript-css-modules

Then, add the plugin to your gatsby-config.js...

  // ...
  "gatsby-plugin-typescript-css-modules"
]