npm install --save-dev gulp-sass-json
npm install --save-dev gulp-rename
npm install --save-dev gulp-replace
Add the colors
object to patternlab-config.json
and configure your paths and filenames.
Remember that the JSON file must have the same name and be in the same directory as your color swatches mustache file.
Also add the task to patternlab:build
, unless you only want to run it manually.
See 00-colors.mustache
for an example. If you change the name of your colors
object, change it in this file too.
Note: If you have multiple levels of variables (for example, $color-text: $color-gray-base
), swatches will be generated but they will not have a background color. One workaround is to put these variables in a separate scss file.
turns into:
I ended up switching to the node version and got this working with PLN3. Thanks for this code. I also tried Evan Lovely's version but I couldn't get it to work.