デザイナーの田中です。
Qiitaと同内容です。

Bootstrap4。とても便利に使わせてもらっています。

開発中に、Bootstrap4のファイルを変更したらアプリ側でも自動更新されてほしい。
ということで何番煎じかわからないですが、Bootstrap自体のビルドツールを使う形でやってみました。

前提

OS X 10.13.2です。
Bootstrap4はbeta2を使用します。※ 2017/12/12現在最新
以下のようなフォルダ構成でReactアプリとします。

- project
    - app (アプリ)
        - src
            - index.js
        - dist
    - bootstrap (Bootstrap)
    package.json
    webpack.config.js

以下のnpmスクリプトでnpm run watchでwebpack経由でアプリの変更をwatchしています。

./package.json
"scripts": {
  "watch": "webpack-dev-server --config ./webpack.config.js",
  ...
}

インストール

Bootstrapをcloneして、インストール

git clone https://github.com/twbs/bootstrap bootstrap
cd ./bootstrap && npm install && gem install bundler && bundler install

アプリ側でwatchできるようにする

アプリのwatchとBootstrapのwatchを並列実行＆監視できるようにするため、npm-run-allを入れます。

npm install --save npm-run-all

package.jsonを変更します。

./package.json
"scripts": {
  "watch": "npm-run-all -p watch:*",
  "watch:app": "webpack-dev-server --config ./webpack.config.dev.js",
  "watch:bootstrap": "cd ./bootstrap && npm run watch",
  ...
}

もちろんアプリからBootstrapを読み込んでいるはず。

./app/src/index.js
import '../../bootstrap/dist/css/bootstrap.css'

これでnpm run watchして./bootstrap以下を編集すれば、自動更新されます。

以上です。

…と言いたいところですが、あまりにも芸がないのですこし変更します。

軽量化する

Bootstrapのwatchを利用すると、同時にドキュメントを生成したりミニファイしてくれたりします。
変更のたびに毎回行われるので、時間がかかってしまいます。
開発中の確認のためには必要ないはずなので、最低限しか行わないようにします。

Bootstrap側で。

./boostrap/package.json
"scripts": {
  "css-fast-compile": "node-sass --output-style expanded --precision 6 scss/bootstrap.scss dist/css/bootstrap.css",
  "css-fast-prefix": "postcss --config build/postcss.config.js --replace dist/css/bootstrap.css",
  "watch-fast": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css-fast-compile && npm run css-fast-prefix\""
}

アプリ側で。

./package.json
"scripts": {
  "watch": "npm-run-all -p watch:*",
  "watch:app": "webpack-dev-server --config ./webpack.config.dev.js",
  "watch:bootstrap": "cd ./bootstrap && npm run watch-fast",
  ...
}

以上です。