Registry / devops / broccoli-sass-source-maps

broccoli-sass-source-maps

library4.3.0jsnpmunverified

A Broccoli plugin for compiling SCSS and Sass files using Dart Sass or LibSass (via node-sass), with support for source maps (embedding sourcesContent). Version 4.3.0 is current, released May 2024, with slow release cadence (1-2 per year). Key differentiators: requires explicit Sass engine dependency, supports source maps by embedding sources, and offers options for silenceDeprecations and quietDeps. Designed for Ember and Broccoli-based build pipelines.

devops web-framework

npm install broccoli-sass-source-maps

github ↗package ↗

INSTALL

IMPORT

SIG · BROCCOLI-SASS-SOUR

broccoli-sass-source-maps

devopsjavascriptv4.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default function

✓ const compileSass = require('broccoli-sass-source-maps')(require('sass'));

✗ const compileSass = require('broccoli-sass-source-maps');

The factory function expects a Sass compiler instance (e.g., require('sass')). Forgetting to call with require('sass') breaks compilation.

compileSass (returned)

✓ const outputTree = compileSass(inputTrees, 'app.scss', 'app.css', options);

✗ const outputTree = compileSass({inputTrees, inputFile: 'app.scss', outputFile: 'app.css', options});

Arguments are positional, not an options object. Common mistake: passing a single object instead of separate arguments.

Fiber option (Dart Sass)

✓ const compileSass = require('broccoli-sass-source-maps')(require('sass')); const Fiber = require('fibers'); const tree = compileSass([...], 'in.scss', 'out.css', {fiber: Fiber});

✗ const Fiber = require('fibers'); const compileSass = require('broccoli-sass-source-maps')(require('sass')({fiber: Fiber}));

Fiber must be passed in the options hash, not to the require('sass') call. Passing it incorrectly does not speed up compilation.

Compiles SCSS with source maps using Dart Sass, demonstrating the required factory pattern and positional arguments.

const compileSass = require('broccoli-sass-source-maps')(require('sass')); const inputTrees = ['styles', 'vendor']; const inputFile = 'myapp/app.scss'; const outputFile = 'assets/app.css'; const options = { outputStyle: 'compressed', sourceMap: true }; const outputTree = compileSass(inputTrees, inputFile, outputFile, options); module.exports = outputTree;

Debug

Known issues

breakingRequires Node >= 10.24.1

fix

Update Node to >= 10.24.1

affects: >=4.0.0

deprecatedLibSass (node-sass) is deprecated; use Dart Sass (sass) instead.

fix

Replace require('node-sass') with require('sass') and adjust options accordingly.

affects: >=4.0.0

gotchaSource map paths are incorrect; only source content is embedded.

fix

Use a post-processing step to correct source map paths, or accept that source maps point to wrong files.

affects: >=4.0.0

gotchaThe factory function must be called with a Sass compiler instance immediately.

fix

Ensure you do require('broccoli-sass-source-maps')(require('sass')) not just require('broccoli-sass-source-maps').

affects: >=4.0.0

Errors

Common errors & fixes

TypeError: compileSass is not a function

Calling require('broccoli-sass-source-maps') without passing a Sass compiler.

fix

Replace require('broccoli-sass-source-maps') with require('broccoli-sass-source-maps')(require('sass'))

Error: Cannot find module 'sass'

Dart Sass not installed as a dependency.

fix

Run npm install --save-dev sass (or node-sass)

TypeError: inputTrees is not iterable

First argument must be an array of tree paths.

fix

Wrap the tree path in an array: [tree] instead of a single string.

Upgrade

Version history

4.3.0latest on npm

Audit

Dependencies

sassrequiredPeer dependency – the Sass engine to compile files (Dart Sass or node-sass must be installed separately)

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/adopted-ember-addons/broccoli-sass-source-maps ↗

packagehttps://www.npmjs.com/package/broccoli-sass-source-maps ↗