Sass を Docker に導入する手順

Sass をビルドする環境の追加

Docker に Sass をビルドする仕組み（以下の2つ）を追加する必要があります。

Node.js
Dart Sass

アプローチは二通りあり、 A. ホスト側でビルドするか B. Sass ビルド用の Docker コンテナを追加するか。B. は、定義さえすれば様々な環境で再現できる利点がありますが、コンテナの構成が複雑になるので今回はシンプルに A. で進めます。

Node.js のインストール

Sass の導入および実行は npm コマンドで行われるため Node.js のインストールが必要です。

Dart Sass のインストール

Dart 言語で実装された Dart Sass が現在唯一の公式実装。以前主流だった node-sass は開発が終了しています。

ディレクトリ構成

Sass は定義ファイルを解析し、css ファイルをビルドします。

ディレクトリ構成を考慮する対象は次の3つ。

package.json
Sass ファイル
css ファイル

補足事項

1. package.json には Sass ファイルを css にビルドするための定義を記述します

2. Sass ファイルを package.json で設定した位置に設置します

※ 定義ファイルの格納ディレクトリは非公開領域に設置することが望ましいです。サーバーの仕様上それが不可能な場合は .htaccess などでアクセス制限しましょう。

3. npm でビルドした css ファイル（style.css など）を所定の場所に出力します

ディレクトリ構成の一例

例えば次のような構成が考えられます

my-project/
├─ package.json         ← Sass プロジェクトを定義
├─ src/
│  └─ scss/             ← Sass ファイル設置ルート
└─ html/
   └─ assets/
      └─ css/
         └─ style.css   ← 出力

上記の scss/ ディレクトリの下に、任意に（例えば以下のように） Sass ファイルを設置していきます。

my-project/
├─ package.json
├─ src/
│  └─ scss/
│     ├─ foundation/
│     │   ├─ _variables.scss
│     │   ├─ _mixins.scss
│     │   └─ _index.scss
│     ├─ object/
│     │   ├─ component/
│     │   │   ├─ _button.scss
│     │   │   └─ _index.scss
│     │   └─ _index.scss
│     └─ style.scss
└─ html/
   └─ assets/
      └─ css/
         └─ style.css

Sassファイルの拡張子には.scss と .sass の2種類がありそれぞれ記法が異なりますが、一般的に.scss が用いられいます。

package.json の設定

package.json は、Node.js を用いた開発で必須のファイルで、プロジェクトの説明を json で記述します。

例えば次のように記述します。

{
  "name": "my-project",
  "private": true,
  "version": "0.1.0",
  "description": "Sass の最小サンプルプロジェクト",
  "scripts": {
    "build": "sass src/scss/style.scss html/assets/css/style.css --style=expanded",
    "watch": "sass --watch src/scss/style.scss:html/assets/css/style.css --style=expanded"
  },
  "devDependencies": {
    "sass": "^1.80.0"
  }
}

項目	役割	例・補足
name	プロジェクトの名前	必須
private	非公開設定	npm に対して
version	バージョン番号
description	説明文
scripts	コマンドショートカット
devDependencies	依存ツールのリスト	“sass”: “^1.80.0” は、ver. 1.80.0 以上の sass を要求