michalklempa/dart-sass

sass/dart-sass Docker镜像文档

镜像概述

本镜像基于debian:buster-slim构建，专为Web开发场景设计，提供dart-sass工具的容器化运行环境。核心功能是通过sass --watch命令监控指定目录下的Sass源文件变化，并自动编译为CSS文件，适用于需要实时样式开发的Web项目。

核心功能与特性

• 实时监控：通过sass --watch命令持续监控Sass文件变化
• 自动编译：当Sass源文件更新时，自动将其编译为CSS文件
• 卷挂载支持：支持本地目录挂载，实现宿主机器与容器间的文件共享
• 轻量级基础：基于debian:buster-slim，镜像体积小巧，运行高效

使用场景

• Web前端开发中实时编译Sass/SCSS文件
• 配合静态Web服务器（如jekyll/jekyll）构建完整的前端开发环境
• 需要保持Sass文件与CSS文件同步更新的开发流程

使用方法

基本使用命令

在项目根目录执行以下命令，将本地Sass源文件目录和CSS输出目录挂载到容器中：

bash
docker run -v $PWD/sass:/sass/ -v $PWD/css:/css/ -it michalklempa/dart-sass:latest

参数说明

• -v $PWD/sass:/sass/：将本地当前目录下的sass文件夹挂载到容器内的/sass目录（Sass源文件目录）
• -v $PWD/css:/css/：将本地当前目录下的css文件夹挂载到容器内的/css目录（CSS输出目录）
• -it：以交互模式运行容器，便于查看编译输出和控制进程

预期输出

容器启动后，将显示类似以下输出，表明Sass正在监控文件变化：

Compiled sass/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.

配合Web服务器使用

在项目根目录中，可同时运行本镜像和Web服务器镜像（如jekyll/jekyll），实现样式实时更新与页面预览的完整开发环境。

镜像构建信息

• 基础镜像：debian:buster-slim
• 运行命令：容器启动时执行的命令为：

  bash
  /opt/dart-sass/sass --watch /sass:/css
  

  该命令监控/sass目录下的所有Sass文件，并将编译后的CSS文件输出到/css目录。