Manual Compilation

This section applies to you if:

  • You want to get your hands dirty with the source code
  • You want to work your custom version of the library, by modifying the variables outside of a build system (if you want to compile a customized version while bundling from the npm module, check the Webpack section).
  • You want to modify the postcss config...
  • ... or do other kinds of witchcraft on the source code

Clone and compile the base version

# Clone the library
git clone
# Install the dev dependencies
cd swatch
npm i
# Compile the library. This will create two files
# - main.css (the Dart SASS compiled library)
# - main.min.css (The minified main.css file with cssnano and postcss)
npm run build:main

Compile a custom version

First, modify the custom.scss following this guide.

Then, compile it and minify it.

# Compiles the library. This will create two files
# - custom.css (the Dart SASS compiled library custom library)
# - custom.min.css (The minified custom.css file with cssnano and postcss)
npm run build:custom

Swatch uses the SASS @use directive. Please mind that this feature is only available in Dart Sass > 1.23.0, while it remains unavailable in other implementations of SASS. This is why the compilation can only work with the npm module sass (Dart SASS) and will fail in node-sass (Javascript SASS).