用于CSS的Rails / Webpacker和BrowserSync

Question

我想同时使用BrowserSync功能和Rails / Webpacker（使用Vue和Rails 5.1）。我的设置适用于来自webpack-dev-server的Javascript。

SCSS / CSS正在正确编译并写入磁盘。 浏览器同步重新加载HTML文件更改。

我将如何实现这项工作？

Rails：3000 浏览器同步：3001 Webpack：3035

browsersync.js

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3001,
        files: ['public/packs/*.css', 'app/views/**/*', 'app/controllers/**/*'],
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:3000/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ]
}