Run Sass Command Line Tool Without Node.js

You may be like me, who just want to learn Sass only. However, you find that it is not that easy to setup a system that can automatically transpile Sass files and automatically reload the browser when Sass, javascript or HTML files changes. At first, I thought I can only do this with a whole gulp.js. Fortunately, there is no need to use gulp.js. Of course, this still took me hours to solve this problem. Here is the simple solution to this situation.

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:

FROM node:lts-alpine
RUN mkdir /app
WORKDIR /app
RUN apk update && apk upgrade
#install Sass
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.

To run a local auto-reloaded web server for your HTML, Javascript and CSS files, please read A Very Basic Browser-Sync Development Environment Based on Docker