浏览器同步重新加载页面，并在两次单击“保存SCSS”文件时显示CSS更改

Question

我正在尝试使用npm软件包自动化开发工作流程。

下面是我的package.json文件：

"main": "index.js",
"scripts": {
"build-css": "node-sass --output-style --include-path scss assets/scss/main.scss style.css/",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
"serve": "browser-sync start --proxy http://localhost/devsite.dev/ --files '*.scss, *.css, *.php'",
"start": "npm-run-all -p watch-css serve"
},
"devDependencies": {
"browser-sync": "^2.26.3",
"node-sass": "^4.11.0",
"nodemon": "^1.18.9",
"npm-run-all": "^4.1.5",
"onchange": "^5.2.0"
}

我遇到以下问题：

1. 如何正确配置Browser-sync以运行WordPress网站？ 我的WordPress网站运行在端口80，浏览器同步运行在端口3000。

我使用以下脚本运行浏览器同步并显示Wordpress网站页面：

"serve": "browser-sync start --proxy http://localhost/devsite.dev/ --files '*.scss, *.css, *.php'",

1. 关于Node-sass文件，我必须保存两次SCSS文件才能通过Browser-sync查看实时更新。

如何通过一次保存SCSS文件在浏览器上显示样式更改？