https://github.com/koluch/esbuild-plugin-sass

Plugin for esbuild to support SASS styles
https://github.com/koluch/esbuild-plugin-sass

Last synced: about 2 months ago
JSON representation

Plugin for esbuild to support SASS styles

• Host: GitHub
• URL: https://github.com/koluch/esbuild-plugin-sass
• Owner: koluch
• Created: 2021-01-15T02:30:22.000Z (over 3 years ago)
• Default Branch: develop
• Last Pushed: 2022-08-06T12:51:46.000Z (about 2 years ago)
• Last Synced: 2024-05-19T00:42:52.574Z (4 months ago)
• Language: TypeScript
• Size: 193 KB
• Stars: 43
• Watchers: 3
• Forks: 14
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-esbuild - esbuild-plugin-sass

README

        
# esbuild-plugin-sass

![Node.js CI](https://github.com/koluch/esbuild-plugin-sass/workflows/Node.js%20CI/badge.svg)

Plugin for [esbuild](https://esbuild.github.io/) to support Sass style sheets

## Install

```shell

npm i esbuild esbuild-plugin-sass

```

or, using [pnpm](https://pnpm.io/):

```shell

pnpm add esbuild esbuild-plugin-sass

```

## Usage example

Create file `src/test.scss`:

```scss

body {

  &.isRed {

    background: red;

  }

}

```

Create file `src/index.js`:

```js

import "./test.scss";

```

Create file `build.js`:

```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:

```console

$ node build.js

```

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

```css

body.isRed {

  background: red;

}

```

# API

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

```typescript

import sass = require("sass");

interface Options {

  rootDir?: string;

  customSassOptions?: Omit;

}

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

```

Supported options:

- `rootDir` - folder to resolve paths against

- `customSassOptions` - options object passed to `sass` [compile](https://sass-lang.com/documentation/js-api/modules#compile) function, except `file` option, which is overriden by plugin for each processed file