https://github.com/dhershman1/sass-pack
A simple sass compiler that accepts arguments to build out a fancy css manifest and compile css for you.
https://github.com/dhershman1/sass-pack
cli css minify sass-compiler sass-pack sourcemaps
Last synced: 5 months ago
JSON representation
A simple sass compiler that accepts arguments to build out a fancy css manifest and compile css for you.
- Host: GitHub
- URL: https://github.com/dhershman1/sass-pack
- Owner: dhershman1
- License: mit
- Created: 2017-05-01T14:10:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-08-28T14:09:26.000Z (over 6 years ago)
- Last Synced: 2025-03-18T11:11:49.224Z (about 1 year ago)
- Topics: cli, css, minify, sass-compiler, sass-pack, sourcemaps
- Language: CSS
- Size: 522 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/dhershman1/sass-pack)
[](https://www.npmjs.com/package/sass-pack)
[](https://david-dm.org/dhershman1/sass-pack)
[](https://david-dm.org/dhershman1/sass-pack?type=dev)
# Sass-Pack
A simple CLI system for compiling sass down to css with additional support for other options and features
[](https://github.com/standard/standard)
## Changelog
You can view the changelog here: https://github.com/dhershman1/sass-pack/blob/master/changelog.md
## CLI Usage
**PLEASE NOTE: as of 2.0.0 `theme` has been removed as an option**
- `sass-pack [options]` - Run sass-pack using your options
- `-s --source ` - Set the source path of page based scss (If you have floating sass files with your pages) - `optional`
- `-m --manifest ` - Set the path of your `css manifest json` - `optional` default: `/`
- `-o --output ` - Set the path for the output css - `optional` default: `/`
- `-n --minify ` - Set the style of minifying can be `nested`, `expanded`, `compact`, or `compressed` - `optional` default: `nested`
- `-x --sourcemaps ` - Tell sass pack if you want to generate sourcemaps as well - `optional` default: `false`
- `-q --hardquit` - Add this tag if when sass-pack runs into a Sass syntax error you would like it to hard quit the process, if you're using a watch tool you can leave this off and sass-pack will await changes and try again.
- `-a --alias ` - The path to replace the alias with
- `-e --external ` - Path to read for your external files can accept a glob
- `-f --folders` - `boolean` style argument that tells sass-pack to use folder/dir names containing themes instead of file names
Example:
> sass-pack -o public/css -s src/app,public/scss/themes -m src/config/css_manifest.json
> sass-pack -o dist/css -s src/app/scss/main,src/app/scss/themes -f -q
OR
> sass-pack --output=public/css --source=src/app,public/scss/themes --manifest=src/config/css_manifest.json
## API Usage
Sass-Pack can now be used as a simple function call, it will return a promise and once everything is finished it will resolve said promise
The options are the same as if using the cli to send a list of paths when using the API put the paths into an array of strings
**AS OF >=v1.5.0 using single letter property names is NO LONGER supported**
* `source` - Source file paths (Supports Globs)
* `output` - Output path (Supports Globs)
* `manifest` - Manifest path (Supports Globs)
* `minify` - Minify type
* `hardquit` - Kill process if `reject` is triggered
* `sourcemaps` - Path to sourcemaps (Supports Globs)
* `alias` - Path to replace alias with
* `folders` - Boolean to tell sass-pack to use folder names
* `external` - Path to tell sass-pack what files to pack into their own css files to output (Supports Globs)
Example:
```js
const sassPack = require('sass-pack');
sassPack({
source: [path.join('tests', '*.scss'), path.join('tests', 'srcTest', '*.scss')],
output: path.join('tests', 'outputs'),
manifest: path.join('tests', 'outputs', 'cssmanifest.json'),
}).then(() => {
//Do some things once sass pack is finished
});
```
## Using Hard Quit
The hard quit option was added if the user wishes for `sass-pack` to perform a `process.exit(1)` if any issue at all (including sass syntax errors) triggers a `reject` in the `promise chain`
> sass-pack -o public/css -s src/app,public/scss/themes -m src/config/css_manifest.json -q
OR
> sass-pack --output=public/css --source=src/app,public/scss/themes --manifest=src/config/css_manifest.json --hardquit
If using the `API` just add `hardquit: true` to your options object
## Using Alias
Alias adds the ability to shorten common paths down so you can have a cleaner import setup in your sass I added this because sass doesn't seem to support dynamic import support like LESS.
So assuming my `test_home.scss` lived two dirs above my importer I'd have this:
```scss
@import '../../test_home.scss';
a {
margin: 1rem;
.testing {
font-weight: 400;
}
}
```
But if I set my alias to `-a tests/srcTest/` and then change the import to: `@import @/test_home.scss` sass-pack will auto convert the alias before compiling down to css
you would do the same thing in the API
```js
const sassPack = require('sass-pack');
sassPack({
source: [path.join('tests', '*.scss'), path.join('tests', 'srcTest', '*.scss')],
output: path.join('tests', 'outputs'),
manifest: path.join('tests', 'outputs', 'cssmanifest.json'),
alias: 'my/alias/path'
}).then(() => {
//Do some things once sass pack is finished
});
```
## External and Folders
With v2.1.0 there are 2 new options introduced, the ability to set a folders boolean, and the ability to set a path to some external files
### Folders
So with this option sass-pack will read the folder that the file lives in and use it as the theme name, instead of the actual file name itself.
Example:
```
/themes
| /default
| /thing.scss
| /theme2
| /index.scss
sass-pack -o output -s themes/**/*.scss -f
then:
/output
| /default.css
| /theme2.css
```
### Externals
The external option allows you to bring in scss files that you want to have their own css output after compile.
Example:
```
/themes
| /default
| /thing.scss
| /thing-email.scss
| /theme2
| /index.scss
| /theme2-email.scss
sass-pack -o output -s themes/**/!(*-email).scss -f -e themes/**/*-email.scss
then:
/output
| /default.css
| /theme2.css
| /theme2-email.css
| /thing-email.css
```