@lass-lang/vite-plugin-lass

Vite plugin for processing .lass files. Transforms Lass source to CSS via the @lass-lang/core transpiler.

Installation

npm install @lass-lang/vite-plugin-lass --save-dev
# or
pnpm add @lass-lang/vite-plugin-lass --save-dev

Usage

Add the plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import lass from '@lass-lang/vite-plugin-lass';

export default defineConfig({
  plugins: [lass()],
});

Then import .lass files in your application:

import './reset.css';
import './theme.lass';  // Processed by vite-plugin-lass

CSS Modules Support

CSS Modules work automatically with .module.lass files:

import styles from './component.module.lass';

// Use scoped class names
element.className = styles.container;

For TypeScript, add declarations for CSS module imports:

// lass.d.ts
declare module '*.lass';

declare module '*.module.lass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

Options

lass({
  verbose: true,  // Enable verbose logging (default: false)
});

verbose

When enabled, logs each .lass file as it's loaded:

[lass] loaded /path/to/theme.lass

How It Works

1. The plugin intercepts imports of .lass files
2. Resolves .lass to a virtual .css module (e.g., theme.lass -> theme.css)
3. Transpiles the Lass source to a JavaScript module via @lass-lang/core
4. Executes the JS module to extract the CSS string
5. Returns the CSS to Vite's CSS pipeline for standard processing

This approach enables compatibility with Vite's CSS features including CSS Modules, HMR (via Vite's standard CSS handling), and build optimization.

Peer Dependencies

• vite ^5.0.0 || ^6.0.0

License

MIT