broccoli-sass

0.7.0 verified Fri May 01 auth: no javascript abandoned

A Broccoli plugin that compiles Sass/SCSS files to CSS using libsass (C++ implementation), providing faster compilation than Ruby Sass. Version 0.7.0 is stable but unmaintained since 2016. Unlike node-sass or dart-sass wrappers, it integrates directly with the Broccoli build system. It supports .scss and .sass files, custom include paths, and options like outputStyle and sourceComments.

Common errors

error Error: Cannot find module 'broccoli-sass' ↓

cause Missing npm install or incorrect package name.

fix

Run 'npm install --save-dev broccoli-sass' in your project directory.

error TypeError: BroccoliSass is not a constructor ↓

cause Missing 'new' keyword when instantiation.

fix

Use 'new BroccoliSass(...)' instead of 'BroccoliSass(...)'.

error Error: ENOENT: no such file or directory, open '...' ↓

cause Input file path is incorrect or missing in the first input node.

fix

Verify inputFile is relative to inputNodes[0] and exists.

Warnings

deprecated Package is unmaintained since 2016. Use broccoli-sass-source-maps or node-sass directly. ↓

fix Switch to broccoli-sass-source-maps or use broccoli-plugin with sass package.

gotcha Options are passed directly to libsass; 'sourceComments' is deprecated in newer libsass versions. ↓

fix Use 'sourceMap' and 'sourceMapContents' options instead.

gotcha Input file must exist in the first input node; otherwise compilation fails silently. ↓

fix Ensure inputFile path is relative to inputNodes[0].

Install

npm install broccoli-sass

yarn add broccoli-sass

pnpm add broccoli-sass

Imports

BroccoliSass

wrong

import BroccoliSass from 'broccoli-sass';

correct

var BroccoliSass = require('broccoli-sass');

This package does not support ES modules; use CommonJS require.

BroccoliSass class

wrong

BroccoliSass(inputNodes, inputFile, outputFile, options);

correct

new BroccoliSass(inputNodes, inputFile, outputFile, options);

BroccoliSass is a constructor and must be instantiated with new.

outputStyle option
wrong
```
options.style = 'expanded';
```
correct
```
options.outputStyle = 'expanded';
```
The option key is outputStyle (not style) per libsass convention.

Quickstart

Compiles app.scss from styles directory, with vendor as additional include path, outputting compressed CSS to assets/app.css.

var BroccoliSass = require('broccoli-sass');
var sourceMap = require('broccoli-source');
var funnel = require('broccoli-funnel');

var styles = new BroccoliSass(
  ['styles', 'vendor'],
  'myapp/app.scss',
  'assets/app.css',
  { outputStyle: 'compressed' }
);

module.exports = styles;