GitHub Actions で Dart Sass を使う方法

2021/08/10GitHub

GitHub Actions で Dart Sass を使いたいことがあったのでその方法をまとめておきます。

前提

使用マシン: ubuntu-latest （ ubuntu-20.04 ）

方法

A. Homebrew を使う
B. Dart Sass を直接ダウンロードする

A. Homebrew を使う

記事執筆時点で ubuntu-20.04 には Homebrew が入っているのでそれを使用するとかんたんにインストールできます。

イメージ:

name: Build

on:
  workflow_dispatch:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Install Dart Sass
        run: brew install sass/sass/sass

インストール後は sass コマンドが使用できます。

B. Dart Sass を直接ダウンロードする

こちらはコマンドを書いてインストール・展開・設置する方法です。

イメージ:

name: Build

on:
  workflow_dispatch:

env:
  SASS_VERSION: 1.37.5

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Add ~/local/bin to paths
        run: |
          mkdir -p $HOME/.local/bin 
          echo "$HOME/.local/bin" >> $GITHUB_PATH
      - name: Install Dart Sass
        run: |
          cd $RUNNER_TEMP
          curl -sSL -o dart-sass.tar.gz ${{ env.SASS_URL }}
          tar zxf dart-sass.tar.gz
          mv ./dart-sass/sass $HOME/.local/bin/
        env:
          SASS_URL: https://github.com/sass/dart-sass/releases/download/${{ env.SASS_VERSION }}/dart-sass-${{ env.SASS_VERSION }}-linux-x64.tar.gz

上のコードをそのまま使用したわけではないので細かなところで間違いがあるかもしれません。

ちなみに SASS_URL をルートの env. 以下で定義すると、同じ場所に定義されている SASS_VERSION が見つからずにエラーになります。

メリット・デメリット

	メリット	デメリット
A. Homebrew	導入がかんたん Homebrew の最新版が常に利用できる	Homebrew 自体のダウンロードが必要なため実行に時間がかかる
B. 直接ダウンロード	実行が速い	導入に手間がかかる Dart Sass のバージョン管理が必要

A はかんたんですが、実行に 1 分〜 1 分半ほど時間がかかります。 B は書くのに手間がかかりますが実行は数秒と非常に高速です。

Homebrew を他の場所でも使う場合は A の Homebrew 方式がよさそうですが、 Dart Sass が使いたいだけであれば Homebrew は過剰なので B のアプローチの方がよいかと思います。