カテゴリー
開発環境 ホームページ製作

gulpでsassをコンパイル

_s (underscores)を使うまでの方法。
環境はwindows10、Local by Flywheelでwordpressを使う。
gulpでsassをコンパイル、style.cssが更新されるようになるまで。参考サイトの通りにすればよいが、インストールするものと、gulpfile.jsの書き込み内容は理解すること。

【参考サイト】
https://asuiro-web.com/study-sass-at-underscores/

  1. _sをダウンロードして解凍。wp_contentのthemesフォルダに移動させる。今回はテーマ名をhogeにした。フォルダ名もhogeにした。
  2. wordpressにログインし、外観→テーマよりhogeにテーマを変更する。
  3. hogeフォルダ上、PowerShellを立ち上げる。
  4. package.jsonを作成する。
    PowerShellのコマンドは、
    npm init -y
  5. 続いて、gulpとgulp-sassをインストール。
    PowerShellのコマンドは、
    npm install -D gulp
    npm install -D gulp-sass
  6. gulpfile.jsをpackage.jsonと同じフォルダに作成し、const以下を書き込む。
  7. gulpを起動。
    PowerShellのコマンドで、
    npx gulp

sassファイルまたはscssファイルを更新すると、style.cssも自動更新されるようならOK。

コメントを残す

メールアドレスが公開されることはありません。