Clarence-pan / vscode-css-modules

VSCode CSS Modules

Extension for CSS Modules, which supports

• Autocomplete
• Go to definition

Demo

Installation

Search css modules on the VS Code Marketplace.

Usage

Currently, this extension only support React project.

Settings

CamelCase for autocomplete

If you write kebab-case classes in css files, but want to get camelCase complete items, set following to true.

{
  "cssModules.camelCase": true
}

Path Alias

Create aliases to import or require modules. (In combination with webpack resolve options.)

{
  "cssModules.pathAlias": {
    "@styles1": "${workspaceFolder}/src/styles1",
    "styles2": "${workspaceFolder}/src/styles2"
  }
}

If there is a jsconfig or tsconfig in your project, the compilerOptions.paths will become aliases. For example

{
  "baseUrl": "./src",
  "paths": {
    "@styles1/*": "styles1/*"
  }
}

would allow to type

import * as styles1 from "@styles1/demo.css";

Feedback

Feel free to submit any issues or pull request.

License

 _________________
< The MIT License >
 -----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||