如果你是一位前端开发者，你一定会使用 Sass 来编写样式。然而，当你在开发过程中更改 Sass 文件时，你需要手动将 Sass 文件编译成 CSS 文件并刷新浏览器才能看到更改后的效果。这些重复性的工作可能会浪费您的时间和精力。
好在有一个 npm 包叫做 node-sass-watcher，它能够帮助你在开发过程中编译 Sass 文件，并自动刷新浏览器。
安装
在使用 node-sass-watcher 前，你需要先安装 Node.js。如果你还没有安装 Node.js，你可以从官方网站 https://nodejs.org/zh-cn/download/ 下载安装包。
完成 Node.js 的安装之后，使用下面的命令来安装 node-sass-watcher：
npm install -g node-sass-watcher
这个命令会将 node-sass-watcher 安装到全局环境中。
使用
在你的项目目录下，执行下面的命令来启动 node-sass-watcher：
node-sass-watcher input.scss output.css
其中，input.scss 指的是要编译的 Sass 文件，output.css 指的是编译后生成的 CSS 文件的路径。
为了让 node-sass-watcher 能够刷新浏览器并展示最新的 CSS 样式，你需要在 Sass 文件中添加注释：
/*# { "id": "1" } #*/其中的 id 可以任意填写，用于区分不同的注释。这个注释告诉 node-sass-watcher 监听到了 Sass 文件的更改，并且需要刷新浏览器。
在浏览器中打开你的项目之后，你会看到“Connected”这个词语出现在浏览器的控制台中。这个词语说明 node-sass-watcher 成功地连接到了浏览器，并准备好了实时刷新 CSS 样式。
示例代码
下面是一段示例代码。在这个示例中，我们的 Sass 文件位于项目根目录的“src”文件夹中，而编译后的 CSS 文件位于项目根目录的“dist”文件夹中。
node-sass-watcher ./src/styles.scss ./dist/styles.css
在“styles.scss”文件中，我们添加了一个注释：
/*# { "id": "1" } #*/此外，我们还添加了一些样式：
$primary-color: #007bff;
body {
background-color: $primary-color;
}在浏览器中打开项目之后，我们可以看到页面的背景颜色变成了蓝色。这是因为我们刚刚修改了 Sass 文件，而 node-sass-watcher 重新编译了 CSS 文件，并刷新了浏览器。
结论
通过使用 node-sass-watcher，我们可以在开发过程中实时编译 Sass 文件，并自动刷新浏览器，从而提高我们的效率。希望这篇文章能对你在前端开发中使用 Sass 时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551a481e8991b448cf011