scss-bundle v3.1.2

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

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"
}

* - 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.

Non-CLI usage

Simple example

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

const fullPath = path.resolve("./examples/simple/main.scss");

Bundler.Bundle(fullPath)
    .then(result => {
        console.log("Bundled SCSS content: ", result.content);
    })
    .catch(error => {
        console.error(error);
    });

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.