Unable to import CSS modules into React TypeScript project #121

Question

Describe the bug In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project

1. Added the plugin with npm install -D typescript-plugin-css-modules
2. Then updated tsconfig.json

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

3. I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
4. So I added global.d.ts, which resolved the error
5. Now when I run it, the Home link on the header should be white. But I see the default color

To Reproduce

1. Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
2. See the Link Home

Expected behavior Home link color should be white

Answer 1

Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components

in a similar way you can access classes from the module scss files.

Answer 2

Never mind, changing the name of the scss file to header.module.scss fixed the issue.