Bundling SCSS files to one bundled file.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

scss-bundle

Bundles all SCSS imports into a single file recursively.

Build Status NPM version npm (tag) dependencies Status devDependencies Status

Who uses scss-bundle

A few of the projects who use the package:

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"
}
Argument Type Description Values Default
entry * string Main entry file where to start bundling.
dest * string Destination file when bundling is done.
verbosity string choices Destination file when bundling is done. None, Errors, Verbose Verbose
includePaths array Include paths for resolving imports
project string Project location, where node_modules are located.
ignoredImports array Ignore resolving import content by matching a regular expression.
* - 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.