Skip to content

Instantly share code, notes, and snippets.

Last active Mar 15, 2022
What would you like to do?
The Makefile I'm using to compile .less file changes *when* the changes occur. Full write up:
# when you run `make` alone, run the `css` rule (at the
# bottom of this makefile)
all: css
# .PHONY is a special command, that allows you not to
# require physical files as the target (allowing us to
# use the `all` rule as the default target).
.PHONY: all
# replace all .less files with .css extension and cache
# the results in a variable called `css_files`
css_files := $(patsubst %.less, %.css, $(wildcard ./public/css/*.less))
# when a .css file is *not* up to date compared to the
# .less file, then make will run the the following commands:
# - echo the string "foo.less -> foo.css"
# - run the command `lessc -x --source-map foo.less foo.css`
./public/css/%.css: public/css/%.less
@echo "$< -> $@"
@./node_modules/.bin/lessc -x --source-map $< $@
css: $(css_files)
"name": "example app",
"scripts": {
"//": "I'm using `make` first, then running fswatch to pick up any changes up front",
"watch": "nodemon -q -w public/css -e less -x make"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment