本文将介绍一款常用的 npm 包 browser-scss，它可以将 scss 文件在浏览器端编译成 css，方便前端工程师使用和调试。
安装
你可以使用 npm 安装 browser-scss，生成的文件将会在 node_modules/.bin/browser-scss 中。
--- ------- ------------ --
使用
在你的项目中，需要使用 scss 文件来编写样式，如 style.scss 文件：
--------------- -------- ------- - ----------------- --------------- -
在 HTML 中引入编译后的 css 文件：
----- ---------------- --------------- ---------------- --
通过命令行编译 scss 文件：
------------ ---------- -- ---------
-w表示监听模式，当 scss 文件改变时会自动重新编译生成 css 文件。
命令行选项
以下是 browser-scss 支持的命令行选项：
-s：输出输出的 css 不压缩。-w：监听模式，改变 scss 文件时自动重新编译。-h：显示帮助信息。
示例代码
我们使用 gulp 作为构建工具来编译 scss 文件。
先安装 gulp：
--- ------- ---- ----------
安装 gulp-sass 插件，该插件可以编译 scss 文件：
--- ------- --------- ----------
在 gulpfile.js 中编写任务：
--- ---- - ----------------
--- ---- - ---------------------
----------------- -------- -- -
------ -------------------------
------------------------ -------------------------- ---------------
--------------------------
---
------------------ -------- -- -
--------------------------- ---------------------
---在项目中创建 sass 文件夹，用于存放 scss 文件。
运行 gulp watch 启动监听，当 scss 文件改变时会自动编译生成 css 文件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde51da