Bundling SCSS files to one bundled file.

Usage no npm install needed!

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


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

    -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?)

    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


Next Steps



Copyright (c) 2018