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

#typescript #cssmodules #vite #plugin

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

Top comments (0)

Read next

lico profile image

React Type Error: not assignable LegacyRef<V> && 'V' refers to a value, did you mean 'typeof V'?

SeongKuk Han -

faranmustafa profile image

Next Auth boilerplate TS

Syed Faran Mustafa -

rellek profile image

My OS can do Somethings yours Cannot

RE||EK -

arichy profile image

A common TypeScript error with useRef

Arc -