activeguild / typescript-plugin-css-modules-vite

Read the definition of vite.config.ts and resolve the CSS Modules type. Supports sass.

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

{
  "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.