지금까지 _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