DEV Community

Cover image for Resolve types using the typescript plugin for CSS modules available in vite
j1ngzoue
j1ngzoue

Posted on • Updated on

Resolve types using the typescript plugin for CSS modules available in vite

You can resolve the read type of preprocessorOptions set in thevite.config.ts file.
Click here for the package repository

Install

npm i -D ts-css-modules-vite-plugin
Enter fullscreen mode Exit fullscreen mode

Add it to the tsconfig.json

{
  "compilerOptions": {
    ...
    "plugins": [{"name": "ts-css-modules-vite-plugin"}]
  },
}
Enter fullscreen mode Exit fullscreen mode

Demo

Image description

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")}`,
          };
        },

    },
  },
});
Enter fullscreen mode Exit fullscreen mode

Discussion (0)