Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactway/scss-bundle
Bundling SCSS files to one bundled file.
https://github.com/reactway/scss-bundle
bundle cli scss scss-files
Last synced: 22 days ago
JSON representation
Bundling SCSS files to one bundled file.
- Host: GitHub
- URL: https://github.com/reactway/scss-bundle
- Owner: reactway
- License: mit
- Created: 2016-08-02T14:49:19.000Z (over 8 years ago)
- Default Branch: dev
- Last Pushed: 2024-08-16T17:49:35.000Z (3 months ago)
- Last Synced: 2024-10-22T09:58:24.243Z (29 days ago)
- Topics: bundle, cli, scss, scss-files
- Language: TypeScript
- Homepage:
- Size: 1.49 MB
- Stars: 57
- Watchers: 8
- Forks: 25
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> **Warning**
> scss-bundle still works for use-cases without @use directive, but to support new SCSS module sytem [a bigger rewrite would be needed](https://github.com/reactway/scss-bundle/issues/90#issuecomment-619390804). Thus, we are not archiving the project to be read-only, but we will not contribute to it. In case someone wants to take it over, please open an issue.
> If you use `scss-bundle` to export scss assets from an angular library, there is already [angular team solution](https://angular.io/guide/creating-libraries#managing-assets-in-a-library)
# scss-bundle
Bundles all SCSS imports into a single file recursively.
[](https://www.npmjs.com/package/scss-bundle)
[](https://www.npmjs.com/package/scss-bundle/v/canary)
[](https://www.npmjs.com/package/scss-bundle)
[](https://dev.azure.com/reactway/ReactWay/_build/latest?definitionId=13&branchName=master)
[](https://dev.azure.com/reactway/ReactWay/_build/latest?definitionId=13&branchName=master)
[](https://david-dm.org/reactway/scss-bundle)
[](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;
deduped?: boolean;
filePath: string;
bundledContent?: string;
found: boolean;
ignored?: boolean;
}
```
##### Properties
- `imports:` [BundleResult](#bundleresult)`[]` - File imports array
- `tilde?: boolean` - Used tilde import
- `filePath: string` - Full file path
- `bundledContent?: 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).