npm scriptsでautoprefixerを使いたい

Question

前提・実現したいこと

npm scripts初心者です。
ファイル監視でsassをコンパイルして、ベンダープレフィックスを付与したいと思っていますが、うまくいきません。
下記のpackage.jsonファイルを作成して実行すると、sassのコンパイル部分だけはうまくいきます。(watch機能も動作します)
ただベンダープレフィックスが付与されません。（CSSでflexbox等を使っているのですが..）

インストールするパッケージやpackage.jsonの記述等がよくわからず、助けていただけませんか？

"npm run all"で実行しています。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "all": "npm run sass && npm run autoprefixer",
    "sass": "node-sass src/sass/style.scss dist/css/style.css --watch --output-style expanded",
    "autoprefixer": "postcss dist/css/style.css --use autoprefixer -d build"
  },
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.5.0",
    "node-sass": "^4.11.0",
    "postcss": "^7.0.14",
    "postcss-cli": "^6.1.2"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 10"
  ]
}

Answer 1

以下のようなディレクトリ構成で、

project
├ dist
│ └ css
├ src
│ └ sass
│ 　 └ style.scss
└ package.json

package.jsonを以下のように、

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "all": "npm run sass && npm run autoprefixer",
    "sass": "node-sass src/sass/style.scss dist/css/style.css --output-style expanded",
    "autoprefixer": "postcss dist/css/style.css --use autoprefixer -d build",
    "watch": "onchange src/sass/style.scss -- npm run all"
  },
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.5.0",
    "node-sass": "^4.11.0",
    "onchange": "^5.2.0",
    "postcss": "^7.0.14",
    "postcss-cli": "^6.1.2"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 10"
  ]
}

style.scssを以下のようにしました。

.box {
  display: flex;
  flex-direction: column;
  width: 100vh;
  height: 100vh;

  .content {
    flex: 1;
  }
}

この状態で、npm installとnpm run watchを実行した後、style.scssの内容を以下のように変更し、保存をすると、project ディレクトリ下に build ディレクトリが作成され、その中にstyle.cssファイルが出来ます。

.box {
  display: flex;
  flex-direction: column;
  width: 100vh;
  height: 100vh;

  .content {
    flex: 1;
    max-width: 250px;
  }
}

style.cssファイルの内容を確認すると、以下のようなコードになっており、無事ベンダープレフィックスの付与された CSS が生成されていることが確認出来ます。

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100vh;
  height: 100vh;
}

.box .content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 250px;
}

---

追記

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "all": "npm run sass && npm run autoprefixer",
    "sass": "node-sass src/sass/style.scss dist/css/style.css --output-style expanded",
    "autoprefixer": "postcss dist/css/style.css --use autoprefixer --replace",
    "watch": "onchange src/sass/style.scss -- npm run all"
  },
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.5.0",
    "node-sass": "^4.11.0",
    "onchange": "^5.2.0",
    "postcss": "^7.0.14",
    "postcss-cli": "^6.1.2"
  },
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "Android >= 4",
    "iOS >= 10"
  ]
}

Comments

[s8_chu]

回答では onchange ( https://github.com/Qard/onchange ) を使用しましたが、 nodemon ( https://github.com/remy/nodemon ) を用いることでも同様のことが行えると思います。

[umauman]

ご回答、ありがとうございます。
あまり意味を理解しないまま、package.jsonを記述していましたが
dist/css/style.cssを上書きしたいため、"autoprefixer"の" -d build"の部分は削除し、
下記に変更しました。
"autoprefixer": "postcss dist/css/style.css --use autoprefixer",

node_modulesを一掃した上でご提示いただいた内容を実行したところ
プレフィックスが付くようになりました！
ただ、今度は監視機能が動作しなくなってしまいました。
scssファイルを変更してもcssファイルが更新されず、
再びnpm run allするとはじめて更新される状況です。

nodemonも試してみましたが、こちらは記述方法がわからず、
プレフィックスが付与されませんでした。
下記のようにしてみました。（恐らく間違い...）

"scripts": {
"watch": "nodemon --ext scss --watch src/sass/style.scss --exec 'npm run all'"
},

インストールしたnodemon
↓↓↓
"nodemon": "^1.18.10",

いただいた記述を拝見するとwatchしそうな雰囲気なので
上手く反映できていないということでしょうか..

[s8_chu]

postcss の replace オプションを使用すると良いと思います。
`package.json`を質問文に追記しました。

[umauman]

何度も本当にありがとうございます。
追記いただいたjsonを使用してnode_modules一式を削除の上、
最初からインストール＆実行をしてみましたが
依然、watch機能が働かず...プレフィックスはちゃんと付与されます。

再びnpm run allをするとscssファイルの変更が反映される状況です。

[s8_chu]

こちらの環境では watch 機能は動作しているようです。
どのように動作しないのか、実行したコマンドを含めて詳しく教えていただけませんか？

[umauman]

どのように提示して良いかわからず、質問欄にコマンドプロンプトの内容を追記しました。
警告が色々出てしまっているのでそれが原因でしょうか...

"npm run all"をした後に"src/sass/style.scss"を編集してみてもコマンドプロンプトは
何も反応しない状況です。

このような感じで伝わるのかが不安ですが、すみません...

[s8_chu]

実行するコマンドは`npm run all`ではなく、`npm run watch`です。

[umauman]

大変失礼しました。`npm run watch`で動作しました！
根気よくお付き合いいただき本当にありがとうございました。
（追記部分は先の部分と齟齬があるので削除しました）