scss-bundle

Bundles all SCSS imports into a single file recursively.

Who uses scss-bundle

A few of the projects who use the package:

• Angular/material2
• Grassy
• Copictures

Get started

If you want to use scss-bundle globally

$ npm install scss-bundle -g

Latest pre-release is published under next tag.

$ npm install scss-bundle@next

CLI Usage

$ scss-bundle -h

Examples

Without config file:

If you want to use scss-bundle without configuration file, entry and dest arguments are required.

$ scss-bundle -e ./src/main.scss -d bundled.scss

Or specifying output verbosity level.

$ scss-bundle -e ./src/main.scss -d bundled.scss --verbosity Errors

With config file:

$ scss-bundle -c scss-bundle.config.json

Config example

{
    "entry": "./src/main.scss",
    "dest": "bundled.scss"
}

CLI Flag	Argument	Type	Description	Values	Default
--entry, -e *	entry *	string	Main entry file where to start bundling.
--dest, -d *	dest *	string	Destination file when bundling is done.
--watch, -w	watch	string	Path that will be watched.
--verbosity	verbosity	string choices	Destination file when bundling is done.	None, Errors, Verbose	Verbose
--includePaths	includePaths	array	Include paths for resolving imports
--project, -p	project	string	Project location, where node_modules are located.
--ignoredImports	ignoredImports	array	Ignore resolving import content by matching a regular expression.
--watch, -w	watch	boolean	Watch files for changes.

* - Required

Output verbosity

CLI option verbosity is used to control how much output you get. By default, you will get Verbose level of verbosity with the most output.

Value	Description
None	Produces no output, only process success/error return code.
Errors	Outputs all errors and skips any additional information.
Verbose	Outputs the most information. This is the default value for verbosity level.

Non-CLI usage

Simple example

import * as path from "path";
import { Bundler } from "scss-bundle";

(async () => {
    // Absolute project directory path.
    const projectDirectory = path.resolve(__dirname, "./cases/tilde-import");
    const bundler = new Bundler(undefined, projectDirectory);
    // Relative file path to project directory path.
    const result = await bundler.Bundle("./main.scss");
})();

API

Bundler

import { Bundler } from "scss-bundle";

Constructor

constructor(fileRegistry: FileRegistry = {}, projectDirectory?: string) {}

Arguments

• fileRegistry?: Registry - Dictionary of files contents by full path
• projectDirectory?: string - Absolute project location, where node_modules are located. Used for resolving tilde imports

Methods

Bundle

public static async Bundle(file: string, fileRegistry: Registry = {}): Promise<BundleResult>

Arguments

• file: string - Main file full path
• fileRegistry: Registry - Dictionary of files contents by full path

Returns

Promise<BundleResult>

BundleAll

public static async BundleAll(files: string[], fileRegistry: Registry = {}): Promise<BundleResult[]>

Arguments

• files: string[] - Array of full path files
• fileRegistry:Registry - Dictionary of files contents by full path

Returns

Promise<BundleResult[]>

Contracts

BundleResult

import { BundleResult } from "scss-bundle";

interface BundleResult {
    imports?: BundleResult[];
    tilde?: boolean;
    filePath: string;
    content?: string;
    found: boolean;
}

Properties

• imports: BundleResult[] - File imports array
• tidle?: boolean - Used tilde import
• filePath: string - Full file path
• content: string - File content
• found: boolean - Is file found

Registry

import { Registry } from "scss-bundle";

interface Registry {
    [id: string]: string | undefined;
}

Key

id: string - File full path as dictionary id

Value

string | undefined - File content

License

Released under the MIT license.