I'm trying to use scss modules with react typescript. This feature should be baked into React from [email protected] and higher as it says on their website.

For typescript support and intellisense, I am using the typescript-plugin-css-modules module.

Hovering over css imports for classnames work just fine:

Here's my code:

---

src/pages/homePage/homePage.tsx

import styles from './styles.module.scss';
 
const HomePage = () => {
    return <div className={styles.myStyle}>Home page</div>;
};
    
export default HomePage;

---

src/pages/homePage/styles.module.scss

.myStyle {
    color: red;
}

---

Error message on screen:

As you can see, the color is correct in the background, and dismissing the error makes the website work just fine. Therefore, it is safe to assume that the error is only made by typescript. I have seen articles about this, like this one where they declare a style.d.ts file in the module root dir, for declaring css modules, with something like this inside:

// For SCSS
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

However, this produces an error as classes is already defined, because this file is already created by react scripts:

node_modules/react-scripts/lib/react-app.d.ts

[...]

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

[...]

So, since react-scripts already create these for me, and I am using the typescript-plugin-css-modules module, everything should be fine. I am not receiving any red lines or errors in the code editor, only in the website.

I hope someone has a solution, thanks in advance!

I'm trying to use scss modules with react typescript. This feature should be baked into React from [email protected] and higher as it says on their website.

For typescript support and intellisense, I am using the typescript-plugin-css-modules module.

Hovering over css imports for classnames work just fine:

Here's my code:

---

src/pages/homePage/homePage.tsx

import styles from './styles.module.scss';
 
const HomePage = () => {
    return <div className={styles.myStyle}>Home page</div>;
};
    
export default HomePage;

---

src/pages/homePage/styles.module.scss

.myStyle {
    color: red;
}

---

Error message on screen:

As you can see, the color is correct in the background, and dismissing the error makes the website work just fine. Therefore, it is safe to assume that the error is only made by typescript. I have seen articles about this, like this one where they declare a style.d.ts file in the module root dir, for declaring css modules, with something like this inside:

// For SCSS
declare module "*.module.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

However, this produces an error as classes is already defined, because this file is already created by react scripts:

node_modules/react-scripts/lib/react-app.d.ts

[...]

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

[...]

So, since react-scripts already create these for me, and I am using the typescript-plugin-css-modules module, everything should be fine. I am not receiving any red lines or errors in the code editor, only in the website.

I hope someone has a solution, thanks in advance!

• javascript
• css
• reactjs
• typescript
• module

Share Improve this question Follow asked Feb 17, 2022 at 19:34 MoriMori 12111 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I found the answer. I accidentally deleted react-app-env.d.ts after using create-react-app. This must exist in order to use CSS modules. If your project is also missing this file. Add it to your src folder and write

/// <reference types="react-scripts" />

As far as I know, you can use module.scss but u should import style from module.css, not module.scss. It works for me.