A Docker Image for Sass
June 17, 2021
About two weeks ago I installed Docker Desktop for macOS on my Mac mini late 2014. Since then I have moved several programs to Docker images and am happy with the result. For example Plurrrr is now generated by
tumblelog running inside a Docker container instead of a VirtualBox virtual machine running some version of Ubuntu.
I don't like to install all kinds of requirements on my main operating system hence why I use VirtualBox. I am now switching to Docker because I might upgrade to a Mac later this year with Apple Silicon. And because it's unclear to me if VirtualBox is going to run natively on the ARM processor I decided to try out Docker.
One of the programs that I wanted to containerize is Sass. I use this program to generate the CSS for several of my sites. The problem with Sass is that there are many versions: Ruby Sass (no longer maintained), LibSass wrappers, Dart Sass, and a Node version of Sass. The later is compiled with
dart2js. I decided to settle on the Node version as the official Dart Docker image is quite large.
So a few days ago I wrote the following Dockerfile:
# Syntax=docker/dockerfile:1 FROM alpine:latest WORKDIR /app RUN apk add --no-cache npm \ && npm install --global sass WORKDIR /data ENTRYPOINT ["npx", "sass"]
This worked very well and resulted in an image of 59.7MB. But when I learned there was an official Node image I was wondering if using this image could result in a smaller image. So today I created the following Docker image:
# Syntax=docker/dockerfile:1 FROM node:alpine WORKDIR /app RUN npm install --global sass WORKDIR /data ENTRYPOINT ["npx", "sass"]
But this one resulted in an image of 120.57MB. I have no idea what extras are present in this image but since the smaller image works those extras don't seem necessary for Sass to work so I decided to stick with the smaller image.
Running the Container
Because I have a
tumblelog directory with all styles located in a
projects directory which is a sibling of my
sites directory I want Docker to be able to access both directories without exposing too much to it:
in-house : `--- projects | : | `--- tumblelog | : : | `--- styles | `--- sites : `--- plurrrr.com : : : `--- htdocs
So instead of one volume (
in-house) I specified two volumes as follows when running
docker inside the
docker run --rm \ --volume "`pwd`/../../projects/tumblelog/styles:/data/styles:ro" \ --volume "`pwd`/htdocs:/data/htdocs" \ --user `id -u`:`id -g` node/sass --no-source-map --style compressed \ styles/soothe.scss htdocs/soothe.css
--volume maps the
styles directory on the host read only (
/data/styles in the container. The second volume maps the
htdocs directory as
/data/htdocs in the container. Since
/data is the current working directory inside the container I can specify
styles/soothe.scss as the input file and
htdocs/soothe.css as the output file.