Bundles all SCSS imports into a single file recursively.
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.
$ scss-bundle -h
Config file properties can be overridden with CLI flags.
CLI Flag | Bundler options | Type | Description | Values | Default |
---|---|---|---|---|---|
-c, --config <path> | string | Configuration file location. | |||
-p, --project <path> | project | string | Project location where node_modules is located. |
||
-e, --entryFile <path> * |
entryFile * |
string | Bundle entry file location. | ||
-o, --outFile <path> * |
outFile * |
string | Bundle output location. | ||
--rootDir <path> | rootDir | string | Specifies the root directory of input files. | ||
-w, --watch [boolean] | watch | boolean | Watch files for changes. Works with rootDir . |
||
--ignoreImports <list> | ignoreImports | string[] | Ignore resolving import content by matching a regular expression. | ||
--includePaths <list> | includePaths | string[] | Include paths for resolving imports. | ||
--dedupeGlobs <list> | dedupeGlobs | string[] | Files that will be emitted in a bundle once. | ||
--logLevel <level> | logLevel | string | Console log level. | silent, error, warning, info, debug, trace | info |
*
- Required
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"
}
}
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");
})();
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 async bundle(file: string, fileRegistry: Registry = {}): Promise<BundleResult>
file: string
- Main file full pathfileRegistry:
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 arraytilde?: 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.