# scss-bundle > Bundling SCSS files to one bundled file. Latest version **3.1.2** (published 2020-05-13) · MIT license · 0 weekly downloads ## Install ```sh npm install scss-bundle pnpm add scss-bundle yarn add scss-bundle bun add scss-bundle ``` Provides the command `scss-bundle`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.1.2 | | Published | 2020-05-13 | | First published | 2016-08-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 18 | | Unpacked size | 55.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 56 | | Author | ReactWay | | Maintainers | quatrodev, reactway-dev | | Keywords | scss, bundle, sass, node-sass | ## Links - npm: https://www.npmjs.com/package/scss-bundle - Repository: https://github.com/reactway/scss-bundle - Issues: https://github.com/reactway/scss-bundle/issues - npm.io page: https://npm.io/package/scss-bundle ## Dependencies (18) - [sass](https://npm.io/package/sass.md) ^1.23.7 - [archy](https://npm.io/package/archy.md) ^1.0.0 - [chalk](https://npm.io/package/chalk.md) ^3.0.0 - [globs](https://npm.io/package/globs.md) ^0.1.4 - [tslib](https://npm.io/package/tslib.md) ^1.10.0 - [chokidar](https://npm.io/package/chokidar.md) ^3.3.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^8.1.0 - [loglevel](https://npm.io/package/loglevel.md) ^1.6.6 - [commander](https://npm.io/package/commander.md) ^4.0.1 - [@types/glob](https://npm.io/package/@types/glob.md) ^7.1.1 - [@types/sass](https://npm.io/package/@types/sass.md) ^1.16.0 - [@types/archy](https://npm.io/package/@types/archy.md) ^0.0.31 - [@types/debug](https://npm.io/package/@types/debug.md) ^4.1.5 - [pretty-bytes](https://npm.io/package/pretty-bytes.md) ^5.3.0 - [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^8.0.1 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8 - [@types/lodash.debounce](https://npm.io/package/@types/lodash.debounce.md) ^4.0.6 - [loglevel-plugin-prefix](https://npm.io/package/loglevel-plugin-prefix.md) ^0.8.4 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 3.1.2 (latest) — 2020-05-13 - 0.0.0-canary.5c7510a (canary) — 2020-07-16 - 2.5.0-beta (next) — 2018-11-16 - 0.0.0-canary.853afa8 — 2020-05-13 - 0.0.0-canary.a470d23 — 2020-05-13 - 3.1.1 — 2020-03-19 - 0.0.0-canary.650dc78 — 2020-03-19 - 3.1.0 — 2020-03-16 - 0.0.0-canary.ad13f8e — 2019-12-19 - 0.0.0-canary.9f111cb — 2019-12-18 - 3.0.2 — 2019-11-16 - 0.0.0-canary.cae5b9e — 2019-10-27 - 0.0.0-canary.048dc82 — 2019-10-24 - 3.0.1 — 2019-08-20 - 0.0.0-canary.3100315 — 2019-08-20 - … 40 more at https://npm.io/package/scss-bundle/versions ## README # scss-bundle Bundles all SCSS imports into a single file recursively. [![NPM version](https://img.shields.io/npm/v/scss-bundle.svg?logo=npm)](https://www.npmjs.com/package/scss-bundle) [![NPM version](https://img.shields.io/npm/v/scss-bundle/canary.svg?logo=npm)](https://www.npmjs.com/package/scss-bundle/v/canary) [![Total downloads](https://img.shields.io/npm/dt/scss-bundle.svg)](https://www.npmjs.com/package/scss-bundle) [![Build Status](https://img.shields.io/azure-devops/build/reactway/reactway/13/master.svg?logo=azuredevops)](https://dev.azure.com/reactway/ReactWay/_build/latest?definitionId=13&branchName=master) [![Code coverage](https://img.shields.io/azure-devops/coverage/reactway/reactway/13/master.svg)](https://dev.azure.com/reactway/ReactWay/_build/latest?definitionId=13&branchName=master) [![Dependencies](https://img.shields.io/david/reactway/tiny-emitter.svg)](https://david-dm.org/reactway/scss-bundle) [![Dev dependencies](https://img.shields.io/david/dev/reactway/tiny-emitter.svg)](https://david-dm.org/reactway/scss-bundle?type=dev) ### Who uses `scss-bundle` #### Projects - [Angular/material2](https://github.com/angular/material2) - [Grassy](https://github.com/lazarljubenovic/grassy) #### Community plugins - [rollup-plugin-bundle-scss](https://github.com/weizhenye/rollup-plugin-bundle-scss) ## Get started If you want to use `scss-bundle` globally ```sh $ npm install scss-bundle -g ``` Latest dev build is published under `canary` tag. ```sh $ npm install scss-bundle@canary ``` To start using the tool, create a [config](#example-config) file and run command: ``` $ scss-bundle ``` It will bundle all scss files in specified `outFile` location. ## CLI Usage ```sh $ scss-bundle -h ``` ## Configuration Config file properties can be overridden with CLI flags. | CLI Flag | Bundler options | Type | Description | Values | Default | | --------------------------------------- | ------------------------ | -------- | ----------------------------------------------------------------- | ------------------------------------------ | ------- | | -c, --config \ | | string | Configuration file location. | | | | -p, --project \ | project | string | Project location where `node_modules` is located. | | | | -e, --entryFile \ `*` | entryFile `*` | string | Bundle entry file location. | | | | -o, --outFile \ `*` | outFile `*` | string | Bundle output location. | | | | --rootDir \ | rootDir | string | Specifies the root directory of input files. | | | | -w, --watch [boolean] | watch | boolean | Watch files for changes. Works with `rootDir`. | | | | --ignoreImports \ | ignoreImports | string[] | Ignore resolving import content by matching a regular expression. | | | | --includePaths \ | includePaths | string[] | Include paths for resolving imports. | | | | --dedupeGlobs \ | dedupeGlobs | string[] | Files that will be emitted in a bundle once. | | | | --logLevel \ | logLevel | string | Console log level. | silent, error, warning, info, debug, trace | info | `*` - Required ### Example config Default name for configuration is `scss-bundle.config.json`. ```json { "bundlerOptions": { "entryFile": "./tests/cases/simple/main.scss", "rootDir": "./tests/cases/simple/", "outFile": "./bundled.scss", "ignoreImports": ["~@angular/.*"], "logLevel": "silent" } } ``` ## Non-CLI usage ### Simple example ```typescript 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 ```typescript import { Bundler } from "scss-bundle"; ``` ### Constructor ```ts constructor(fileRegistry: FileRegistry = {}, projectDirectory?: string) {} ``` ##### Arguments - `fileRegistry?:` [Registry](#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 ```typescript public async bundle(file: string, fileRegistry: Registry = {}): Promise ``` ##### Arguments - `file: string` - Main file full path - `fileRegistry:` [Registry](#registry) - Dictionary of files contents by full path ##### Returns `Promise<`[BundleResult](#bundleresult)`>` ### Contracts #### BundleResult ```typescript import { BundleResult } from "scss-bundle"; ``` ```typescript interface BundleResult { imports?: BundleResult[]; tilde?: boolean; filePath: string; content?: string; found: boolean; } ``` ##### Properties - `imports:` [BundleResult](#bundleresult)`[]` - File imports array - `tilde?: boolean` - Used tilde import - `filePath: string` - Full file path - `content: string` - File content - `found: boolean` - Is file found #### Registry ```typescript import { Registry } from "scss-bundle"; ``` ```typescript 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](LICENSE). --- _Source: https://npm.io/package/scss-bundle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._