_s (underscores)を使うまでの方法。
環境はwindows10、Local by Flywheelでwordpressを使う。
gulpでsassをコンパイル、style.cssが更新されるようになるまで。参考サイトの通りにすればよいが、インストールするものと、gulpfile.jsの書き込み内容は理解すること。
【参考サイト】
https://asuiro-web.com/study-sass-at-underscores/
- _sをダウンロードして解凍。wp_contentのthemesフォルダに移動させる。今回はテーマ名をhogeにした。フォルダ名もhogeにした。
- wordpressにログインし、外観→テーマよりhogeにテーマを変更する。
- hogeフォルダ上、PowerShellを立ち上げる。
- package.jsonを作成する。
PowerShellのコマンドは、
npm init -y - 続いて、gulpとgulp-sassをインストール。
PowerShellのコマンドは、
npm install -D gulp
npm install -D gulp-sass - gulpfile.jsをpackage.jsonと同じフォルダに作成し、const以下を書き込む。
- gulpを起動。
PowerShellのコマンドで、
npx gulp
sassファイルまたはscssファイルを更新すると、style.cssも自動更新されるようならOK。