How to use CSS/SCSS modules with TypeScript

Jan 13, 2021

This post assumes you know what CSS modules are and you're trying to do something similar to me, which is using TypeScript and SCSS in a project. I propose this solution that hides the error (and hopefully does more than hiding it).

A few hooks converted to TypeScript later and... I notice that unfortunately TypeScript doesn't compile due to my scss module imports:

Cannot find module './MonComposant.module.scss' or its corresponding type declarations. ts(2307)

Create a file with a name representing the filetype, in our case,  scss.d.ts, and add this definition inside:

declare module "*.scss" {
const styles: { [className: string]: string };
export default styles;
}

It's possible you might need to add the path to this file in your tsconfig.json.

If you're looking for a more complete solution, I recommend giving this article by Spencer Miskoviak  a read.

Published on January 13, 2021

Written by Vladislav Kim