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;
}

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