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
npm i -D ts-css-modules-vite-pluginOptions
| 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
{
"compilerOptions": {
...
"plugins": [{"name": "ts-css-modules-vite-plugin", "root": "./"}]
},
}Resolve the vite.config.ts
Resolve the preprocessorOptions setting within the plugin.
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.
{
"typescript.tsdk": "node_modules/typescript/lib"
}Use the workspace version.
