bundle-scss

Bundling SCSS files to one bundled file.

Usage no npm install needed!

<script type="module">
  import bundleScss from 'https://cdn.skypack.dev/bundle-scss';
</script>

README

bundle-scss (sass is supported!)

Build Status npm NPM version dependencies Status devDependencies Status Known Vulnerabilities

Find scss files by mask and bundles into a single file. Recursive search for all @import .... All imported files (e.g variables, mixins) will be added at the beginning by default priority Or you may specify your own priority.

Get started

If you want to use bundle-scss

$ npm i -D bundle-scss

CLI Usage

Usage: bundle-scss [options]

Concatenate multiple scss files into one

Options:
    -h, --help                   output usage information
    -V, --version                output the version number
    -m, --mask <mask>            mask for files which have to be concatenate. Example \"./src/**/*.theme.scss\".
                                 You may pass several definitions in Array
    -d, --dest <dest>            Output file desination. Example `\"./dist/themes.scss\"`
    -s, --sort <sort>            Optional. Sort priority.
                                 Example: `variable` - will pass all variables files at the beginning
                                 Default priority ['theme-variable', 'variable', 'mixin']
    -c, --config                 Shows that parameters `mask`, `dest`, `sort`(optional) should be specified in `package-json` or `.bundle-style-conf.json`
    -i, --ignoreComments         with this flag it will ignore commented imports`

Non-CLI Usage

const bundleScss = require("bundle-scss");
bundleScss(mask, dest, sort?)

Where
    mask -  \"./src/**/*.theme.scss\", you may pass several definitions in Array
    dest -  Output file desination. `.dist/dist/theme.scss`. `.dist/dist/` will be created, if it not exist
    sort -  Optional. Defines sort ordering. Default priority ['theme-variable', 'variable', 'mixin']"

Example usage

With inline parameters

//package.json scripts
{
  "script": {
    "postbuild": "npm run themes",
    "themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
  }
}

postbuild - have to specify post task related to your project

Params in separate file

package.json example

{
  "script": {
    "postbuild": "npm run themes",
    "themes": "bundle-scss --config"
  },
  "bundleStyle": {
    "dest": "./des/themes.scss",
    "mask": "./src/**/*.theme.scss",
    "sort": ["first-priority", "second-priority", "mixin"] // part of filenames
  }
}

or .bundle-style-conf.json example

{
  "dest": "./des/themes.scss",
  "mask": "./src/**/*.theme.scss",
  "sort": ["first-priority", "second-priority", "mixin"] // part of filenames
}

SASS supporting

Use the same config with sass file extesions instead of scss

Like it?

:star: this repo

Other

Next Steps
CHANGELOG

License

MIT

Copyright (c) 2018