dockerでsassのインストールと自動コンパイル

dockerでのsassの自動コンパイル環境を構築する機会があったので、備忘録的に残しておきます

目的

• dockerでsass用のコンテナを立ち上げる
• scssファイルを変更したら、自動的にcssファイルにコンパイルするようにする

環境

• M3mac
• docker v25.0.3
• node v20.11.1
• npm v10.5.0
• durt_sass v1.77.5

※dockerはインストールしてあるものとします

ディレクトリ構成

.
└── /
    ├── assets/
    │   ├── css/
    │   │   ├── style.css <-コンパイル後に生成
    │   │   └── style.css.map　<-コンパイル後に生成
    │   ├── scss/
    │   │   └── style.scss
    │   └── js/
    │       └── script.js
    ├── compose.yml
    └── Dockerfile

手順

1. compose.ymlに以下のコードを記述する

compose.yml

sass:
  build:
    context: .
    dockerfile: Dockerfile
  volumes:
    - .:/var/www/sass

contextでbuildコマンドを実行するディレクトリを指定しています
dockerfileでbuild時に参照するファイルを指定してあげます

volumesでマウントするディレクトリを指定しています
.でcompose.ymlがあるディレクトリと、/var/www/sassでコンテナ内のディレクトリをマウントさせています

2. Dockerfileに以下のコードを記述する

Dockerfile

FROM node:latest
WORKDIR /var/www/sass
RUN npm install -g sass
CMD ["sass", "--watch", "assets/scss:assets/css"]

npm install -g sassでdart_sassをグローバルにインストールしています

sass --watch assets/scss:assets/cssでscssディレクトリにあるscssファイルをcssディレクトリにcssファイルでコンパイルしています
--watchを入れることで、scssファイルを監視しておいて、変更が合ったら自動でコンパイルしてくれるようになります

3. 以下コマンドでイメージを作成、コンテナを作成/起動する

Terminal

docker compose up --build

compose upでコンテナの作成と起動をしてくれます
--buildのオプションをつけることでコンテナ作成の前に、イメージを作成してくれます

まとめ

以上でコンテナ起動時とscssファイル更新時に自動的にcssファイルにコンパイルしてくれるようになります

さいごに

まだまだDocker初心者なので間違いなどあればご指摘お願いします