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 firstname.lastname@example.org:fwrlines/swatch.git
# Install the dev dependencies
# 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