@lass-lang/webpack-plugin-lass

Webpack loader and plugin for processing .lass files. Transforms Lass source to CSS via @lass-lang/core.

Installation

npm install @lass-lang/webpack-plugin-lass css-loader mini-css-extract-plugin --save-dev

Usage

Option A: Plugin (recommended)

// webpack.config.js
const { LassPlugin } = require('@lass-lang/webpack-plugin-lass');

module.exports = {
  plugins: [new LassPlugin()],
};

The plugin auto-configures module.rules for .lass files.

Option B: Manual loader rules

The lass loader returns JS (not CSS). It injects inline CSS imports using webpack's !=! matchResource syntax. Those imports are handled by your existing CSS rules (css-loader + MiniCssExtractPlugin).

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.lass$/,
        use: ['@lass-lang/webpack-plugin-lass'],
        type: 'javascript/auto',
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

Then import .lass files directly:

import './styles.lass';

CSS Modules

CSS Modules work with .module.lass files:

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

element.className = styles.container;

For TypeScript, add declarations:

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

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

Options

// Loader options
{
  verbose: true,  // Enable logging (default: false)
  useJS: false,   // Use JavaScript mode instead of TypeScript (default: false)
}

How It Works

Uses the Svelte-style self-referencing loader pattern:

1. First pass: Loader transpiles .lass source to JS module via @lass-lang/core
2. Executes JS module to extract CSS string (base64 data: URL)
3. Caches CSS and returns JS code with self-referencing inline import
4. Second pass: Loader returns cached CSS to webpack's CSS pipeline
5. Preamble imports are preserved in webpack's module graph (watch/HMR)

Peer Dependencies

• webpack >=5.0.0

License

MIT