今まで_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