csstypescriptvitecss-modules

How to type CSS Modules with TypeScript (Vite project)

I'm using Vite (React+TypeScript template) and try to set up typed import CSS Modules. But I can't import any exactly class

test.module.css

.testCssClass {
    color: greenyellow;
}

When I using it there are some problems. I can import CSS module as CSSModuleClasses but it doesn't have known keys for TypeScript enter image description here

JSX usage

Module '"*.module.css"' has no exported member 'testCssClass'. Did you mean to use 'import testCssClass from "*.module.css"' instead? ts(2614)

TypeScript error

Untyped css classes

I'have tried to use typescript-plugin-css-modules in tsconfig.json

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

But it doesn't help.

Solution

  • Make sure the follow the Recommended usage mentioned in the typescript-plugin-css-modules readme.

    Option 1: Set your Workspace's version of TypeScript.

    1. Open the VS Code command palette
    2. Enter TypeScript: Select TypeScript Version...
    3. Choose your workspace version

    Option 2: Set the plugin directly in your user/workspace settings (if you do not use any of the plugin options)

    {
  "typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]
}