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.
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.