Skip to content
All writing

How to use CSS/SCSS modules with TypeScript

Make TypeScript stop complaining about SCSS module imports with a single .d.ts declaration file.

#snippetsjavascripttypescriptscsscss-modules

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.

Get new posts by email

New writing in your inbox. Unsubscribe anytime.