esbuild-sass-modules-plugin

A sass module loader plugin for esbuild.

This plugin allows .scss and .sass files to be imported as modules in javascript files.

Warning: this module does not work with SASS 1.63.0 because of sass/dart-sass#1995

The issue has been fixed as of SASS 1.63.4

Note: this package is a module.

Install

Using NPM

$ npm install --save-dev @squirrelnetwork/esbuild-sass-modules-plugin

Using Yarn

$ yarn add -D @squirrelnetwork/esbuild-sass-modules-plugin

Basic usage

import esb from 'esbuild';
import sassModules from '@squirrelnetwork/esbuild-sass-modules-plugin';

await esb.build(
	{ bundle: true
	, sourceRoot: 'src/'
	, entryPoints: [ 'src/index.js' ]
	, outfile: 'build/app.js'
	, plugins: [ sassModules() ]
	}
);

Resolvers

Resolvers modify the behavior of the plugin when importing files.

Bundle resolver

import 'source.scss';

Inline resolver

import style from 'inline:source.scss';

// contains the compiled css text
console.log(style);

File resolver

import style from 'file:source.scss';

// contains the text path to be fetched
fetch(style)
	.then(css => console.log(css));

PostCSS and its plugins

Just set the postcss.use to true to enable PostCSS and set postcss.plugins to an array of plugins.

Autoprefixer example

import esb from 'esbuild';
import sassModules from '@squirrelnetwork/esbuild-sass-modules-plugin';
import autoprefixer from 'autoprefixer';

await esb.build(
	{ bundle: true
	, sourceRoot: 'src/'
	, entryPoints: [ 'src/index.js' ]
	, outfile: 'build/app.js'
	, plugins:
		[ sassModules(
			{ postcss:
				{ use: true
				, plugins: [ autoprefixer ]
				}
			}
		)
		]
	}
);

Documentation

See the wiki of this project.

Squirrel-Network/esbuild-sass-modules-plugin