https://github.com/elycruz/rollup-plugin-sass

Rollup .sass files.
https://github.com/elycruz/rollup-plugin-sass

rollup rollup-plugin sass scss

Last synced: about 1 year ago
JSON representation

Rollup .sass files.

• Host: GitHub
• URL: https://github.com/elycruz/rollup-plugin-sass
• Owner: elycruz
• License: mit
• Created: 2016-03-28T13:42:47.000Z (about 10 years ago)
• Default Branch: main
• Last Pushed: 2025-01-16T20:50:45.000Z (over 1 year ago)
• Last Synced: 2025-05-07T20:03:07.709Z (about 1 year ago)
• Topics: rollup, rollup-plugin, sass, scss
• Language: TypeScript
• Homepage:
• Size: 991 KB
• Stars: 93
• Watchers: 3
• Forks: 34
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

• awesome - sass - SASS integration for a bundle. (Plugins / CSS)

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 `