Introduction

WordPressの開発にSASSを導入したい。

Motivation and Context

1. ArtisanではWordpressのCSSにBootstrapを採用している。
2. これまではCDNだったけどSASSで導入したい。
3. SASSのために不要なコマンドや設定を追加したくない（これまで通りコマンド１発で開発環境作りたい）

Get Started!!

01. まず初めに

Artisanでは今見えているウェブサイトをWordpressで構築しています。

そして、Wordpressの開発環境としてDockerを採用しています。

CSSフレームワークとしてbootstrapを採用しています。

これまではCDNとしてbootstrapを導入していました。

これだとカラーリングなどを一括編集できずにbootstrapのカスタマイズ性を十分に発揮できませんでした。

ということで、BootstrapをSASSで導入しようってことに至りました。

ただ、わざわざコンパイル用のコマンドを入れたりとか面倒くさいことはしたくない。（これ絶対）

これまで通り、

$ docker compose up -d

このコマンドだけで全ての環境が整い、SASSの自動コンパイルもそこに含みたい。

02. ビルド用のコンテナ作成

まずは、dart-sassを使うためにnode.jsのDockerコンテナを追加しました。

version: '3'
services:
  node:
    build: ./node
    tty: true
.
.
.

これで、Wordpredd, DB, NODEという３つのコンテナを立ち上げることになります。

このコンテナの中で以降の作業を行なっていきます。

03. npmでbootstrapをインストール

コンテナの中ではnpmを使ってパッケージ管理しています。

package.jsonはシンプルにこんな感じです。

{
  "name": "sass",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "sass --watch sass/restyle-bootstrap.scss /wordpress/wp-content/themes/artisan/assets/css/restyle-bootstrap.css"
  },
  "author": "LittlePocket.Lab",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "bootstrap": "^5.3.3",
    "sass": "^1.77.8"
  }
}

ん、testとかあるけど、あとで消しておくとしましょう。。。

重要なので、bootstrap,sassという２つのパッケージが入っていること。

そして、npm run buildでsassを実行してくれることです。

ここでは初期段階なので変数とか使わずにパス指定でコンパイル先も指定しています。

04. bootstrapカスタム用のsassファイルを作成

さて、いよいよnpmのbootstrapをカスタム変数で編集するためのsassファイルを作ります。

ファイルのパスはこんな感じです。

node/sass/restyle-bootstrap.scss

中身はこんな感じ

// 任意のカラーを設定
$theme-colors: (
  "primary":   #624cab,
  "secondary": #686868,
  "info":      #bbadff,
  "success":   #9fa0ff,
  "warning":   #8e94f2,
  "danger":    #8895b3,
  "light":     #D8D8D8,
  "dark":      #383838,
  // gray
  "white":    #ffffff,
  "gray-100": #F0F0F0,
  "gray-200": #D8D8D8,
  "gray-300": #B8B8B8,
  "gray-400": #A9A9A9,
  "gray-500": #909090,
  "gray-600": #686868,
  "gray-700": #585858,
  "gray-800": #383838,
  "gray-900": #080808,
  "black":    #000000,
);

// npmのbootstrapを参照
@import "../node_modules/bootstrap/scss/bootstrap";

上の方でBootstrapで定義されているカラーを上書きしています。

そして上書きした変数でbootstrapのファイルをコンパイル。

そうすることで、bootstrapで定義されているカラーリングを変更することができます。

05. 自動コンパイル設定

$ docker compose exec node npm run build

ここまでの設定があれば、このコマンドでbootstrapのカスタムファイルをコンパイルしてくれます。

が、このままだとファイルを編集するたびにコマンドを打つ必要があります。

そのコマンドをコンテナ起動時に実行してあげましょう。

version: '3'
services:
  node:
    build: ./node
    tty: true
    ports:
      - "1010:3000"
    volumes:
      - ./node:/node
      - ./wordpress/wp-content/themes/${WORDPRES_THEME_NAME}:/wordpress/wp-content/themes/${WORDPRES_THEME_NAME}
    command: npm run build
.
.
.

こうすることで、

$ docker compose up -d

をしたときにnodeコンテナが立ち上がり、コンパイルまでやってくれます。

コンテナ設計の面白さ

Dockerのコンテナをデザインするのはめっちゃ面白いです。

人によってやり方は違うし、やり方によって動作スピードや汎用性も大きく変わってくる。

そして、開発時の「不便さ」はだいたいコンテナが解消してくれます。

今回はWordpress, DBという基本の２つのコンテナに加え、Bootstrapビルド用にNodeコンテナを作りました。

これで、Wordpressでsassを使った開発ができるようになり、いろいろ便利になりました。

フロントエンド界隈の進化は凄まじく、ついていくのも大変ですが、その恩恵を受けられれば開発が楽しくなります。

ぜひ、採用してみてください！