June 17, 2021

Edit: Please don't use this Dockerfile. Instead download sass.Dockerfile from my tumblelog project.

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.

Containerizing Sass

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 plurrrr.com directory:

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

The first --volume maps the styles directory on the host read only (ro) as /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.