scss-bundle

Bundling SCSS files to one bundled file.

Showing:

Popularity

Downloads/wk

3.8K

GitHub Stars

53

Maintenance

Last Commit

1yr ago

Contributors

17

Package

Dependencies

18

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Reviews

Average Rating

5.0/52
Read All Reviews

Top Feedback

1Easy to Use
1Performant

Readme

scss-bundle

Bundles all SCSS imports into a single file recursively.

NPM version NPM version

Total downloads Build Status Code coverage

Dependencies Dev dependencies

Who uses scss-bundle

Projects

Community plugins

Get started

If you want to use scss-bundle globally

$ npm install scss-bundle -g

Latest dev build is published under canary tag.

$ npm install scss-bundle@canary

To start using the tool, create a config file and run command:

$ scss-bundle

It will bundle all scss files in specified outFile location.

CLI Usage

$ scss-bundle -h

Configuration

Config file properties can be overridden with CLI flags.

CLI FlagBundler optionsTypeDescriptionValuesDefault
-c, --config \<path>stringConfiguration file location.
-p, --project \<path>projectstringProject location where node_modules is located.
-e, --entryFile \<path> *entryFile *stringBundle entry file location.
-o, --outFile \<path> *outFile *stringBundle output location.
--rootDir \<path>rootDirstringSpecifies the root directory of input files.
-w, --watch [boolean]watchbooleanWatch files for changes. Works with rootDir.
--ignoreImports \<list>ignoreImportsstring[]Ignore resolving import content by matching a regular expression.
--includePaths \<list>includePathsstring[]Include paths for resolving imports.
--dedupeGlobs \<list>dedupeGlobsstring[]Files that will be emitted in a bundle once.
--logLevel \<level>logLevelstringConsole log level.silent, error, warning, info, debug, traceinfo

* - Required

Example config

Default name for configuration is scss-bundle.config.json.

{
    "bundlerOptions": {
        "entryFile": "./tests/cases/simple/main.scss",
        "rootDir": "./tests/cases/simple/",
        "outFile": "./bundled.scss",
        "ignoreImports": ["~@angular/.*"],
        "logLevel": "silent"
    }
}

Non-CLI usage

Simple example

import 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 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>

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
  • tilde?: 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.

Rate & Review

Great Documentation0
Easy to Use1
Performant1
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
User Rating
4.6/ 5
898
Top Feedback
88Highly Customizable
84Great Documentation
69Hard to Use
GitHub Stars
60K
Weekly Downloads
17M
poi
poiA zero-config bundler for JavaScript applications.
User Rating
4.5/ 5
2
Top Feedback
1Great Documentation
1Highly Customizable
1Slow
GitHub Stars
0
Weekly Downloads
317
mic
microbundle📦 Zero-configuration bundler for tiny modules.
User Rating
4.2/ 5
9
Top Feedback
3Great Documentation
3Easy to Use
3Performant
GitHub Stars
7K
Weekly Downloads
5K
fuse-boxA blazing fast js bundler/loader with a comprehensive API :fire:
User Rating
4.3/ 5
6
Top Feedback
3Performant
2Great Documentation
GitHub Stars
4K
Weekly Downloads
5K
rollupNext-generation ES module bundler
User Rating
4.7/ 5
89
Top Feedback
22Easy to Use
19Great Documentation
16Performant
GitHub Stars
21K
Weekly Downloads
1M
See 14 Alternatives

Tutorials

No tutorials found
Add a tutorial