Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/activeguild/typescript-plugin-css-modules-vite
Read the definition of vite.config.ts and resolve the CSS Modules type. Supports sass.
https://github.com/activeguild/typescript-plugin-css-modules-vite
cssmodules plugin typescript vite
Last synced: 3 months ago
JSON representation
Read the definition of vite.config.ts and resolve the CSS Modules type. Supports sass.
- Host: GitHub
- URL: https://github.com/activeguild/typescript-plugin-css-modules-vite
- Owner: activeguild
- License: mit
- Created: 2021-11-05T15:54:51.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-29T08:59:37.000Z (over 1 year ago)
- Last Synced: 2024-10-12T01:08:02.656Z (3 months ago)
- Topics: cssmodules, plugin, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 366 KB
- Stars: 15
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ts-css-modules-vite-plugin β‘ Welcome π
# ts-css-modules-vite-plugin
Read the definition of `vite.config.ts` and resolve the `CSS Modules` type.
Supports `sass`.
## Demo
## Install
```bash
npm i -D ts-css-modules-vite-plugin
```
## Options
| Parameter | Type | Description |
| --------- | ------ | -------------------------------------------------------------------------------------- |
| root | string | Set the relative path from the project root to the 'vite.config.ts' file. (default ./) |
## Add it to the `tsconfig.json`
```json
{
"compilerOptions": {
...
"plugins": [{"name": "ts-css-modules-vite-plugin", "root": "./"}]
},
}
```
## Resolve the `vite.config.ts`
Resolve the `preprocessorOptions` setting within the plugin.
```ts
import path from "path";
import { defineConfig } from "vite";
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles" as common;`,
importer(...args) {
if (args[0] !== "@/styles") {
return;
}
return {
file: `${path.resolve(__dirname, "./src/assets/styles")}`,
};
},
},
},
},
});
```
## Using VS Code
The VScode typescript version needs to match the project.
Set the following.
```json
{
"typescript.tsdk": "node_modules/typescript/lib"
}
```
Use the workspace version.
