esbuild-plugin-sass

Plugin for esbuild to support Sass style sheets

Install

npm i esbuild esbuild-plugin-sass

or, using pnpm:

pnpm add esbuild esbuild-plugin-sass

Usage example

Create file src/test.scss:

body {
  &.isRed {
    background: red;
  }
}

Create file src/index.js:

import "./test.scss";

Create file build.js:

const esbuild = require("esbuild");
const sassPlugin = require("esbuild-plugin-sass");

esbuild
  .build({
    entryPoints: ["src/index.js"],
    bundle: true,
    outfile: "bundle.js",
    plugins: [sassPlugin()],
  })
  .catch((e) => console.error(e.message));

Run:

$ node build.js

File named bundle.css with following content will be created:

body.isRed {
  background: red;
}

API

Module default-exports a function, which need to be called with or without options object:

import sass = require("sass");

interface Options {
  rootDir?: string;
  customSassOptions?: Omit<sass.Options, "file">;
}

export = (options: Options = {}) => Plugin;

Supported options:

• rootDir - folder to resolve paths against
• customSassOptions - options object passed to sass compile function, except file option, which is overriden by plugin for each processed file

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

Fixed

• Generate correct watch paths on Windows

[1.0.1] - 2022-01-10

Fixed

• Fix API documentation in README

[1.0.0] - 2022-01-08

Fixed

• #36: Watch all files, used by entry Sass file
• #15: Changed module resolution strategy

Changed

• Migrate to compile function instead of render, since it is deprecated
• Do not support node v10 anymore, since some updated packages doesn't support it anymore
• Move to pnpm package manager
• Move to new workflow
• Update dependencies