今まで_s（アンダースコアーズ）でgulpなどでsassをコンパイルしてWordpressテーマ開発をしていたが、webpackを使用して開発出来るSageというスターターテーマがある事を知ったので使ってみました。

インストール

wordpressのテーマディレクトリでcomposerを使用してsageをインストール。


# @ wp-content/themes/
$ composer create-project roots/sage theme-name

インストールが終わると何やら色々と聞かれるので入力。
今回は以下のように入力した。



// テーマ名
 Theme Name [Sage Starter Theme]:
 > ikadatic

// テーマURI
 Theme URI [https://roots.io/sage/]:
 > https://ikadatic.com

// テーマの説明
 Theme Description [Sage is a WordPress starter theme.]:
 > themes of ikadatic.com

// バージョン
 Theme Version [9.0.9]:
 >     

// 作成者
 Theme Author [Roots]:
 > ikadatic

// 作成者URI
 Theme Author URI [https://roots.io/]:
 > https://ikadatic.com

// ローカル開発環境のホスト
 Local development URL of WP site [http://example.test]:
 > localhost:10080

// テーマのディレクトリ
 Path to theme directory (e.g., /wp-content/themes/ikadatic) [/app/themes/sage]:
 > /wp-content/themes/ikadatic

// cssフレームワーク
 Which framework would you like to load? [Bootstrap]:
  [0] None
  [1] Bootstrap
  [2] Bulma
  [3] Foundation
  [4] Tachyons
  [5] Tailwind
 > 0

// 下記sassファイルを上書きしていいか
 Are you sure you want to overwrite the following files?
 - styles/common/_variables.scss
 - styles/components/_comments.scss
 - styles/components/_forms.scss
 - styles/components/_wp-classes.scss
 - styles/layouts/_header.scss

 (yes/no) [no]:
 > yes

 Done.

// 匿名の使用状況データを送信するを入力するか
 Send anonymous usage data? 
 We are only sending your framework selection and OS

 (yes/no) [no]:
 >

終わるとthemeディレクトリが作成されているので、テーマディレクトリ内でyarn & yarn buildでjavascriptのパッケージをインストール。


$ cd theme-name
$ yarn & yarn build

wordpressの管理画面にログインして、作成したテーマを選択。

yarn startコマンドでbrowsersyncとオートコンパイルが立ち上がる。


$ yarn start

エラー

自分の環境ではコンパイルエラーが発生した。


 ERROR  Failed to compile with 1 errors                            18:20:41

 error  in ./resources/assets/styles/main.scss

Module build failed: Error: Node Sass does not yet support your current env
ironment: OS X 64-bit with Unsupported runtime (67)

下記サイトを参考にnode-sassをインストールしなおしたところ正常にコンパイルできた。
Nodeのバージョンを上げたらnode-sassがエラーを吐いたのでコードリーディングしてみた

$ yarn add --force node-sass