1.0.1 • Published 6 years ago
@philxu/text-bundle v1.0.1
scss-bundle
Bundles all SCSS imports into a single file recursively.
Who uses scss-bundle
Projects
Community plugins
Get started
If you want to use scss-bundle globally
$ npm install scss-bundle -gLatest dev build is published under canary tag.
$ npm install scss-bundle@canaryTo start using the tool, create a config file and run command:
$ scss-bundleIt will bundle all scss files in specified outFile location.
CLI Usage
$ scss-bundle -hConfiguration
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
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 pathprojectDirectory?: string- Absolute project location, wherenode_modulesare located. Used for resolving tilde imports
Methods
bundle
public async bundle(file: string, fileRegistry: Registry = {}): Promise<BundleResult>Arguments
file: string- Main file full pathfileRegistry: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 arraytilde?: boolean- Used tilde importfilePath: string- Full file pathcontent: string- File contentfound: 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.