Tweet

Pocket

久しぶりに１から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.scssでimportして使っている。
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"
}