DEV Community

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

Posted on • Edited 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)