# @phanty/sass-bundler

> A package for bundling page-specific SASS/SCSS

Latest version **1.0.2** (published 2021-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @phanty/sass-bundler
pnpm add @phanty/sass-bundler
yarn add @phanty/sass-bundler
bun add @phanty/sass-bundler
```

Provides the command `sass-bundler`.

## 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 | 1.0.2 |
| Published | 2021-07-15 |
| First published | 2021-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 81.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | phanty |
| Maintainers | phanty |
| Keywords | scss, sass, bundle |

## Links

- npm: https://www.npmjs.com/package/@phanty/sass-bundler
- Repository: https://github.com/Phanty133/sass-bundler
- Homepage: https://github.com/Phanty133/sass-bundler#readme
- Issues: https://github.com/Phanty133/sass-bundler/issues
- npm.io page: https://npm.io/package/@phanty/sass-bundler

## Dependencies (4)

- [sass](https://npm.io/package/sass.md) ^1.35.2
- [pkg-up](https://npm.io/package/pkg-up.md) ^3.1.0
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.0

## 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

- 1.0.2 (latest) — 2021-07-15
- 1.0.1 — 2021-07-14
- 1.0.0 — 2021-07-14

## README

# sass-bundler
A quick and dirty npm package for bundling page-specific SASS/SCSS.

## Installation
`npm install --save-dev @phanty/sass-bundler`

## Usage

`@import` and `@use` statements in SASS must be preceeded by `!bundler`, e.g. `@use "!bundler/_partial.scss"`.

For the bundler to recognize partials, their filename must be preceeded by `_`.

Outputs partials used by all SASS files to a single file.

### Example

#### Input

`a.scss`
```
@use "!bundler/_partial1.scss"

#a{
  color: red;
}
```

`b.scss`
```
@use "!bundler/_partial1.scss"

#b{
  color: green;
}
```

`_partial1.scss`
```
span{
  font-weight: bold;
}
```

#### Compiles to

`a.css`
```
#a{
  color: red;
}
```

`b.css`
```
#b{
  color: green;
}
```

`shared.css`
```
span{
  font-weight: bold;
}
```

## CLI

### `sass-bundler [command] [options]` 

#### Commands:
* `help` - Print help
* `init` - Generate a default config file in current directory
* `build` - Build and bundle SASS/SCSS files. If sass-bundler.config.js isn't in the project root, uses default config.
* `watch` - Watch SASS/SCSS files for changes. If sass-bundler.config.js isn't in the project root, uses default config.

#### Options:
* `--config [string]` - Path to config file
* `--<CONFIG_ARG> [string]` - Overwrite config argument

## API

### `class Bundler(config?)`

* `.buildAll()` - Builds and bundles all SCSS/SASS files according to `config`
* `.watch()` - Watches files for changes. Incrementally compiles.

## Configuration

* `sassDir: [string]` - `./sass` - Path to the SASS/SCSS directory
* `outDir: [string]` - Default: `./build` - Path to the output directory
* `verbose: [boolean]` - Default: `false` - If true, prints which files have been compiled
* `sharedPath: [string]` - Default: `./build/shared.css` - Path to the file where to output the shared css

---
_Source: https://npm.io/package/@phanty/sass-bundler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._