Skip to content

Instantly share code, notes, and snippets.

@mthadley
Created August 19, 2019 02:37
Show Gist options
  • Save mthadley/d5b5129eab282749087b0bcac716fd94 to your computer and use it in GitHub Desktop.
Save mthadley/d5b5129eab282749087b0bcac716fd94 to your computer and use it in GitHub Desktop.
Makefile with npm and node-sass
# 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 $< $@
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment