First, as usual, I would like to list all the requirements.
- Don’t have to install extra software (like a whole node.js). Would like to accomplish this job only with Docker.
- No need to setup a whole gulp tasks just to transpile Sass files.
- Automatically transpile Sass files, and reload the browser while files change.
The official Sass command line tool can perfectly watch Sass files, and transpile these files when they changes.
It is easy to package the official Sass command line tool in a Docker image. Use the following Dockerfile:
RUN mkdir /app
RUN apk update && apk upgrade
RUN npm install -g sass
Build the image, and now you have the Sass command line tool in hand. To run the image, you need the following command. It is better to describe this command in detail.
docker run -it --rm -v $(pwd):/app sass sass --watch ./:./
-it gives you the console output.
--rm removes this container automatically when you stop the container. If you forget to remove the container, you will get a container name conflict when you your run this command again.
-v mount the current directory (in your local machine) to /app (in the container). You should be in the directory where your Sass files reside.
The first “sass” in the command is the name of the image. The second “sass” is the command to be executed, after the container is created.
--watch tells the "second" sass to watch the files in the current directory and then transpile to the current directory.
You should run this container in the directory where your Sass files reside.