npm 包 browser-scss 使用教程

阅读时长 3 分钟读完

本文将介绍一款常用的 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

纠错
反馈

纠错反馈