vite-plugin-style-tsconfig-paths

A Vite plugin to resolve paths from tsconfig.json in style imports(less, sass, scss, stylus, css)

Install

1# npm
2npm i vite-plugin-style-tsconfig-paths -D
3
4# yarn
5yarn add vite-plugin-style-tsconfig-paths -D
6
7# pnpm
8pnpm add vite-plugin-style-tsconfig-paths -D

Usage

import the plugin in your vite.config.js

1// vite.config.ts
2import { defineConfig } from 'vite'
3import react from '@vitejs/plugin-react'
4import { styleTsconfigPaths } from 'vite-plugin-style-tsconfig-paths'
5
6export default defineConfig({
7  plugins: [react(), styleTsconfigPaths()]
8})

config alias in tsconfig.json

1{
2  "compilerOptions": {
3    "baseUrl": "./",
4    "paths": {
5      "@styles/*": ["src/styles/*"]
6    }
7  }
8}

import in style file

1// src/styles/color.less
2@vite-blue:rgba (28, 71, 212, 0.7);

1// src/App.less
2@import '@styles/color.less';
3
4.theme-color {
5  color: @vite-blue;
6}

tips

only handle alias start with @

1{
2  "compilerOptions": {
3    "baseUrl": "./",
4    "paths": {
5      "@styles/*": ["src/styles/*"], // work
6      "styles/*": ["src/styles/*"] // not work
7    }
8  }
9}

this plugin will ingore style file in node_modules