背景

WordPress開発では、フロントはシンプルにBootstrapのみでスタイリングしています。

ただ、BootstrapはCDNで使用するとカラーが固定されていて全部同じようなサイトになってしまいますよね。

ということで、最低限カラーリングは動的に変えたい！ということでSassを導入します。

基本的なコンセプト

1. WordPressのプラグインは使用しない
   • 今回は、DockerのWordpressコンテナにnode,npmをインストールしました。
   • インストールしたnode.jsを使ってsassを動かします。
2. wordpress側ではコンパイル済みのstyle.cssのみ読み込む
   • **/style.scssをコンパイルして、style.cssとして吐き出します。
   • せっかくcssをバンドルできるので、１ファイルに納めてみました

Dockerfile

FROM wordpress:latest

# sassを使うための設定
## 必要なパッケージのインストール
RUN apt update
RUN apt install -y nodejs npm

## Install Sass globally
RUN npm install -g sass

sassでリアルタイム編集

docker compose exec wordpress sass --watch /var/www/html/wp-content/themes/テーマ名/assets/scss/style.scss /var/www/html/wp-content/themes/テーマ名/style.css