search

clinyong / vscode-css-modules

https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules
MIT License
144 stars 39 forks source link

readme

VSCode CSS Modules

Github Actions VSCode Marketplace Version VSCode Marketplace Downloads VSCode Marketplace Stars

Extension for CSS Modules, which supports

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 |
                ||     ||