# rollup-plugin-sass

> Rollup Sass files.

Latest version **1.16.0-rc.1** (published 2026-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-sass
pnpm add rollup-plugin-sass
yarn add rollup-plugin-sass
bun add rollup-plugin-sass
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.16.0-rc.1 |
| Published | 2026-05-25 |
| First published | 2016-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 3 |
| Unpacked size | 42.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 96 |
| Author | BinRui.Guan |
| Maintainers | elycruz |
| Keywords | rollup, rollup-plugin, sass |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-sass
- Repository: https://github.com/elycruz/rollup-plugin-sass
- Homepage: https://github.com/elycruz/rollup-plugin-sass#readme
- Issues: https://github.com/elycruz/rollup-plugin-sass/issues
- npm.io page: https://npm.io/package/rollup-plugin-sass

## Dependencies (3)

- [sass](https://npm.io/package/sass.md) ^1.7.2
- [resolve](https://npm.io/package/resolve.md) ^1.5.0
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^3 || ^4 || ^5

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.16.0-rc.1 (latest) — 2026-05-25
- 1.15.3 — 2025-06-19
- 1.15.2 — 2025-01-16
- 1.15.0 — 2025-01-07
- 1.14.0 — 2024-10-30
- 1.13.2 — 2024-08-18
- 1.13.1 — 2024-07-02
- 1.13.0 — 2024-06-25
- 1.12.22 — 2024-04-16
- 1.12.21 — 2023-10-07
- 1.12.20 — 2023-07-19
- 1.12.19 — 2023-03-05
- 1.12.18 — 2023-02-26
- 1.12.17 — 2022-12-03
- 1.12.16 — 2022-09-17
- … 59 more at https://npm.io/package/rollup-plugin-sass/versions

## README

# rollup-plugin-sass [![CI](https://github.com/elycruz/rollup-plugin-sass/actions/workflows/CI.yml/badge.svg)](https://github.com/elycruz/rollup-plugin-sass/actions/workflows/CI.yml) [![issues](https://img.shields.io/github/issues/elycruz/rollup-plugin-sass.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-sass) [![npm](https://img.shields.io/npm/v/rollup-plugin-sass.svg?style=flat-square)](https://www.npmjs.com/package/rollup-plugin-sass) [![mit](https://img.shields.io/npm/l/rollup-plugin-sass.svg?style=flat-square)](https://opensource.org/licenses/MIT) [![Coverage Status](https://coveralls.io/repos/github/elycruz/rollup-plugin-sass/badge.svg?branch=main)](https://coveralls.io/github/elycruz/rollup-plugin-sass?branch=main)

## Installation

```bash
npm install rollup-plugin-sass -D
```

## Usage

```js
// rollup.config.js
import sass from 'rollup-plugin-sass';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [sass()],
};
```

### rollup.config.ts

Add `allowSyntheticDefaultImports`, or `esModuleInterop` (enables `allowSyntheticDefaultImports`), to tsconfig.json:

```json
{
  "compilerOptions": {
    "esModuleInterOp": true
  }
}
```

[`esModuleInterop` reference](https://www.typescriptlang.org/tsconfig#esModuleInterop)

Write rollup.config.ts:

```typescript
// rollup.config.ts
import sass from 'rollup-plugin-sass';

// ...
```

Profit.

## Options

### `output`

- Type: `Boolean|String|Function`
- Default: `false`

```js
sass({
  // Default behavior disable output
  output: false,

  // Write all styles to the bundle destination where .js is replaced by .css
  output: true,

  // Filename to write all styles
  output: 'bundle.css',

  // Callback that will be called on generate bundle with two arguments:
  // - styles: the concatenated styles in order of imported
  // - styleNodes: an array of style objects:
  //  [
  //    { id: './style1.scss', content: 'body { color: red };' },
  //    { id: './style2.scss', content: 'body { color: green };' }
  //  ]
  output(styles, styleNodes) {
    writeFileSync('bundle.css', styles);
  },
});
```

### `insert`

- Type: `Boolean`
- Default: `false`

If you specify `true`, the plugin will insert compiled CSS into `<head/>` tag, via utility function that it will output
in your build bundle.

```js
sass({
  insert: true,
});
```

### `processor`

- Type: `Function`

If you specify a function as processor which will be called with compiled css before generate phase.

```js
import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

sass({
  // Processor will be called with two arguments:
  // - style: the compiled css
  // - id: import id
  processor: (css) =>
    postcss([autoprefixer])
      .process(css)
      .then((result) => result.css),
});
```

The `processor` also support object result. Reverse `css` filled for stylesheet, the rest of the properties can be customized.

```js
sass({
  processor(code) {
    return {
      css: '.body {}',
      foo: 'foo',
      bar: 'bar',
    };
  },
});
```

Otherwise, you could do:

```js
import style, { foo, bar } from 'stylesheet';
```

#### Create CSS modules using processor `cssModules` output

When returning a `cssModules` property inside a processor's output,
the plugin will change the module's default export to the value
of `cssModules` instead of the compiled CSS code.

The following example uses [`postcss-modules`](https://www.npmjs.com/package/postcss-modules) to create css modules:

```js
import postcss from 'postcss';
import postcssModules from 'postcss-modules';

sass({
  async processor(css, id) {
    let cssModules = {};
    const postcssProcessResult = await postcss([
      postcssModules({
        getJSON: (_, json) => {
          if (json) cssModules = json;
        },
      }),
    ]).process(css, { from: id });

    return { css: postcssProcessResult.css, cssModules };
  },
});
```

Which allows you to write something like:

```js
import style from 'stylesheet';

style['some-classes'];
```

#### Exporting sass variable to \*.js

Example showing how to use [`icss-utils`](https://www.npmjs.com/package/icss-utils) to extract resulting sass vars to your \*.js bundle:

```js
const config = {
  input: 'test/fixtures/processor-promise/with-icss-exports.js',
  plugins: [
    sass({
      processor: (css) => {
        const pcssRootNodeRslt = postcss.parse(css);
        const extractedIcss = extractICSS(pcssRootNodeRslt, true);
        const cleanedCss = pcssRootNodeRslt.toString();
        const out = { css: cleanedCss, ...extractedIcss.icssExports };
        // console.table(extractedIcss);
        // console.log(out);
        return out;
      },
    }),
  ],
};
```

See the [Input file](test/fixtures/processor-promise/with-icss-exports.js) for example on how to access
the exported vars.

### `runtime`

- Type: `Object`
- Default: `sass`

If you specify an object, it will be used instead of [sass](https://github.com/sass/dart-sass). You can use this to pass a different sass compiler (for example the `node-sass` npm package).

### `api`

- Type: `'legacy'|'modern'`
- Default: `'legacy'`

```js
sass(); // default to legacy

sass({ api: 'modern' });

sass({
  api: 'modern',
  options: {
    style: 'compressed',
  },
});
```

### `options`

- Type: `Object`

> [!NOTE]
> The content of `options` is sensible to the value specified in `api` option

Options for [sass](https://github.com/sass/dart-sass) or your own runtime sass compiler.

If you specify `data`, the plugin will treat as prepend sass string.
Since you can inject variables during sass compilation with node.

```js
sass({
  options: {
    data: '$color: #000;',
  },
});
```

---

> [!TIP]
> If your are working with npm packages, consider to use
> [NodePackageImporter](https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/)
>
> ```js
> import * as sass from 'sass';
>
> sass({
>   options: {
>     importers: [new sass.NodePackageImporter()],
>   },
> });
> ```

### `include`

- Type: `string | string[]`
- Default: `['**/*.sass', '**/*.scss']`

Glob of sass/css files to be targeted.

```ts
sass({
  include: ['**/*.css', '**/*.sass', '**/*.scss'],
});
```

### `exclude`

- Type: `string | string[]`;
- Default: `'node_modules/**'`

Globs to exclude from processing.

```ts
sass({
  exclude: 'node_modules/**',
});
```

## License

[MIT](./LICENSE) [elycruz](https://github.com/elycruz),
[BinRui.Guan](mailto:differui@gmail.com)

---
_Source: https://npm.io/package/rollup-plugin-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._