Bundles all SCSS imports into a single file recursively.
A few of the projects who use the package:
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
$ scss-bundle -h
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
{
"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
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. |
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");
})();
import { Bundler } from "scss-bundle";
constructor(fileRegistry: FileRegistry = {}, projectDirectory?: string) {}
fileRegistry?:
Registry - Dictionary of files contents by full pathprojectDirectory?: string
- Absolute project location, wherenode_modules
are located. Used for resolving tilde imports
public static async Bundle(file: string, fileRegistry: Registry = {}): Promise<BundleResult>
file: string
- Main file full pathfileRegistry:
Registry - Dictionary of files contents by full path
Promise<
BundleResult>
public static async BundleAll(files: string[], fileRegistry: Registry = {}): Promise<BundleResult[]>
files: string[]
- Array of full path filesfileRegistry:
Registry - Dictionary of files contents by full path
Promise<
BundleResult[]>
import { BundleResult } from "scss-bundle";
interface BundleResult {
imports?: BundleResult[];
tilde?: boolean;
filePath: string;
content?: string;
found: boolean;
}
imports:
BundleResult[]
- File imports arraytidle?: boolean
- Used tilde importfilePath: string
- Full file pathcontent: string
- File contentfound: boolean
- Is file found
import { Registry } from "scss-bundle";
interface Registry {
[id: string]: string | undefined;
}
id: string
- File full path as dictionary id
string | undefined
- File content
Released under the MIT license.