esbuild-sass-plugin

What is esbuild-sass-plugin?

The esbuild-sass-plugin is an npm package that integrates Sass/SCSS compilation into the esbuild bundler. It allows developers to seamlessly compile Sass/SCSS files into CSS during the build process, leveraging the speed and efficiency of esbuild.

What are esbuild-sass-plugin's main functionalities?

Basic Sass/SCSS Compilation

This feature allows you to compile Sass/SCSS files into CSS as part of the esbuild process. The code sample demonstrates how to set up esbuild with the esbuild-sass-plugin to bundle JavaScript and compile Sass/SCSS files.

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-sass-plugin').sassPlugin;

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [sassPlugin()]
}).catch(() => process.exit(1));

Custom Sass Options

This feature allows you to pass custom options to the Sass compiler. The code sample shows how to configure the plugin to include additional paths and enable indented syntax for Sass files.

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-sass-plugin').sassPlugin;

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [sassPlugin({
    includePaths: ['./src/styles'],
    indentedSyntax: true
  })]
}).catch(() => process.exit(1));

Source Maps

This feature enables source map generation for easier debugging of Sass/SCSS files. The code sample demonstrates how to configure esbuild to generate source maps along with the compiled CSS.

const esbuild = require('esbuild');
const sassPlugin = require('esbuild-sass-plugin').sassPlugin;

esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  sourcemap: true,
  plugins: [sassPlugin()]
}).catch(() => process.exit(1));

Other packages similar to esbuild-sass-plugin

sass

The 'sass' package is a standalone Sass compiler that can be used with various build tools. Unlike esbuild-sass-plugin, it does not integrate directly with esbuild but can be used in conjunction with other tools to achieve similar results.

node-sass

The 'node-sass' package is another popular Sass compiler that uses the LibSass library. It is similar to the 'sass' package but is often used in older projects. It does not integrate directly with esbuild but can be used with other build tools.

sass-loader

The 'sass-loader' package is a loader for webpack that compiles Sass/SCSS files. It is similar in functionality to esbuild-sass-plugin but is designed specifically for webpack rather than esbuild.

README

A plugin for esbuild to handle sass & scss files.

Main Features

• css loader
• css result modules or dynamic style added to main page
• uses dart sass

Install

npm i esbuild-sass-plugin

Usage

Just add it to your esbuild plugins:

import {sassPlugin} from "esbuild-sass-plugin";

await esbuild.build({
    ...
    plugins: [sassPlugin()]
});

this will use loader: "css" and your transpiled sass will be included in index.css.

If you specify type: "style" then the stylesheet will be dynamically added to the page.

Alternatively you can import a lit-element css result:

...
import styles from "./styles.scss";
...
@customElement("hello-world")
export default class HelloWorld extends LitElement {

    static styles = styles

    render() {
        ...
    }
}

if you specify the type "lit-css" like this:

await esbuild.build({
    ...
    plugins: [sassPlugin({
        type: "lit-css",
        ... // other options for sass.renderSync(...)
    })]
});

Look in the test folder for more usage examples.

The options passed to the plugin are a superset of the sass Options.

CACHING

It greatly improves the performance in incremental builds or watch mode.

It has to be enabled with cache: true in the options.

TODO:

• css in js modules
• refactor the options
• speed improvements

Benchmarks

... coming soon

License

MIT