Makefile with npm and node-sass

Makefile

# Get a list of all sass src files. We use the `shell` function
# to run a normal command and store the result in this variable.
SCSS_SRC = $(shell find src/scss -iname "*.scss")

# Make a list of all the files we want as output, so...
#   src/scss/header.scss
# gets tranformed  to...
#   dist/header.css
CSS = $(addprefix dist/, $(notdir $(SCSS_SRC:.scss=.css)))

# `all` is the "default" recipe, so if you run `make`, it is
# implicitly running `make all`.
#
# This recipe should build our entire project, and so we make it depend
# on all of the output files we want to have. Right now, only css files.
.PHONY: all
all: $(CSS)

# `.PHONY` means that there isn't actually a file named `clean` that we
# are trying to build.
.PHONY: clean
clean:
	rm -fr dist

node_modules: package.json package-lock.json
	npm install
	# We "touch" the directory, as a normal `npm install` won't update the
	# timestamp, and make won't realize that the directory is actually up
	# to date.
	touch $@

# This rule matches any css file in the `dist` directory, that also has
# a matching file in the `src/scss` directory.
#
# This rule also depends on `node_modules`, since we can't run `npx` if
# we haven't installed our npm dependencies. Remember that make knows how
# to build `node_modules` because of the rule that we just saw above.
#
# `$<` is shorthand for the source file (the one to the right of the colon).
# `$@` is shorthand for the target file (the output css file in this case).
dist/%.css: src/scss/%.scss node_modules
	npx node-sass $< $@