本文将介绍一款常用的 npm 包 browser-scss,它可以将 scss 文件在浏览器端编译成 css,方便前端工程师使用和调试。
安装
你可以使用 npm 安装 browser-scss,生成的文件将会在 node_modules/.bin/browser-scss
中。
npm install browser-scss -g
使用
在你的项目中,需要使用 scss 文件来编写样式,如 style.scss
文件:
$primary-color: #007bff; .navbar { background-color: $primary-color; }
在 HTML 中引入编译后的 css 文件:
<link rel="stylesheet" type="text/css" href="style.css" />
通过命令行编译 scss 文件:
browser-scss style.scss -w style.css
-w
表示监听模式,当 scss 文件改变时会自动重新编译生成 css 文件。
命令行选项
以下是 browser-scss 支持的命令行选项:
-s
:输出输出的 css 不压缩。-w
:监听模式,改变 scss 文件时自动重新编译。-h
:显示帮助信息。
示例代码
我们使用 gulp 作为构建工具来编译 scss 文件。
先安装 gulp:
npm install gulp --save-dev
安装 gulp-sass
插件,该插件可以编译 scss 文件:
npm install gulp-sass --save-dev
在 gulpfile.js 中编写任务:
-- -------------------- ---- ------- --- ---- - ---------------- --- ---- - --------------------- ----------------- -------- -- - ------ ------------------------- ------------------------ -------------------------- --------------- -------------------------- --- ------------------ -------- -- - --------------------------- --------------------- ---展开代码
在项目中创建 sass
文件夹,用于存放 scss 文件。
运行 gulp watch
启动监听,当 scss 文件改变时会自动编译生成 css 文件。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde51da