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

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

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

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

But it doesn't help.

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

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

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

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

But it doesn't help.

• css
• typescript
• vite
• css-modules

1 Answer 1

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"]
}