WordPressテーマ作成のCSS開発環境 : WordPress

久しぶりに1からWordPressテーマを開発している。
フリーランスのときは、タスクランナーとしてGrantを使っていたが、最近はタスクが少ないこともあってnpm-scriptsを使っている

使用しているパッケージ

  • bootstrap
  • node-sass
  • csscomb
  • autoprefixer
  • postcss-cli autoprefixerを使うためにインストール
  • npm-run-all
  • watch

ディレクトリ構成

|- mytheme
    |
    |-- .csscomb.json
    |
    |-- index.php
    |
    |-- style.css
    |
    |-- package.json
    |
    |-- src
        |
        |-- sass
            |
            |-- style.scss
            |
            |-- _component.scss
            |
            |-- ...

パッケージインストール

$ npm i -D bootstrap node-sass csscomb autoprefixer postcss-cli npm-run-all watch

Bootstrap

Bootstrapは、Sassを提供している。

変数のカスタマイズやmixinを使用できる点などSassは便利なので、mytheme/src/sass/style.scssimportして使っている。
Sassの!defaultキーワードは、値が割り当てられていない場合にだけ値を設定する。
Bootstrapの_variables.scssで定義されている変数は、!defaultが付与されているので、本体に手を加えることなくカスタマイズできる。

mytheme/src/sass/style.scss

$red: #f00; /* bootstrapの_variables.cssで定義されている$red変数をカスタマイズできる */

@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import "_component.scss";
@import "_...";
...

npm-scripts

やりたいことは以下の3つ。

  • Sassのコンパイル
  • CSSプロパティの順序を統一
  • CSSベンダープレフィックススを付与

package.json

"scripts": {
    "comb:sass": "csscomb ./src/sass",
    "comp:sass": "node-sass src/sass/style.scss -o ./ --output-style expanded",
    "prefixer": "postcss style.css --use autoprefixer -d ./",
    "build:css": "run-s comb:sass comp:sass prefixer",
    "watch:sass": "watch 'npm run build:css' ./src/sass"
}

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。