【node-sass】node-sassで複数ディレクトリのscssファイルを一括でトランスパイルしたい（npm script）

Question

下記のようなディレクトリ構成の際に、node-sassを使って、child01〜child03のscssファイルをそれぞれのディレクトリのcssに一括でトランスパイルする方法を教えていただきたいです。

root/
　├ child01/
　│　├ index.html
　│　└ assets/
　│　　　├ css/
　│     │  └ style.css
　│     └ scss/
　│        └ style.scss
　│  
　├ child02/
　│　├ index.html
　│　└ assets/
　│　　　├ css/
　│     │  └ style.css
　│     └ scss/
　│        └ style.scss
　│ 
　├ child03/
　│　├ index.html
　│　└ assets/
　│　　　├ css/
　│     │  └ style.css
　│     └ scss/
　│        └ style.scss
　│
　├ node_modules
　└ package.json

このような記述でできると思ったのですが、できませんでした。

  "scripts": {
    "sass": "node-sass --include-path scss ./**/assets/scss/style.scss ./**/assets/css/style.css",
  },

サブディレクトリが増えた際にpackage.jsonを毎回書き換えるのは手間なので、サブディレクトリが増えても一括でトランスパイルを行いたいです。

各サブディレクトリにpackage.jsonを置いたり、gulp等のタスクランナーを利用せずに、このディレクトリ構成のままnpm scriptで実行したいです。

もし方法がわかるという方がいましたらご教授願います。

Answer 1

node-sass において出力先を glob 記法で指定することは出来ません。そのため、現状では npm scripts を用いて質問文に書かれているような動作は実現出来ません。今回の場合、以下のいずれかの方法を採用することになると思います。

1. Gulp, webpack などを使用する。
2. 各ディレクトリに対応するコマンドを作成する。
3. ディレクトリ構造を現状の node-sass で記述可能な構造に変更する。
4. コンパイル後にファイルを移動させる。