最近，我在开发一个静态站点，需要使用 SASS 来编写样式表。在寻找解决方案时，我发现了一个非常好用的 npm 包 wintersmith-sassify。在本文中，我将为大家介绍如何使用 wintersmith-sassify 包来编译 SASS 文件。
什么是 wintersmith-sassify？
wintersmith-sassify 是 wintersmith 的一个插件，用于编译 SASS 文件。wintersmith 是静态站点生成器，它使用模板引擎来生成 HTML 页面。wintersmith-sassify 可以在生成 HTML 页面之前，将 SASS 文件编译成 CSS 文件。
使用教程
安装 wintersmith-sassify
首先，我们需要安装 wintersmith-sassify。在命令行中输入以下命令：
- --- ------- ------------------- ----------
配置 wintersmith
接下来，我们需要在 wintersmith 的配置文件中添加 wintersmith-sassify 插件。打开 wintersmith 的配置文件 wintersmith-config.json，添加以下代码：
-
---------- -
---------------------
-
-编写 SASS 文件
现在，我们可以在 wintersmith 的 source 目录中编写 SASS 文件了。假设我们在 source/styles/ 目录下创建了一个名为 style.scss 的 SASS 文件。代码如下：
----------- ----- ---- - ---------- ----------- -
编写模板文件
接下来，我们需要编写模板文件来引用编译后的 CSS 文件。在 source/templates/ 目录中，创建一个名为 layout.jade 的模板文件。代码如下：
----
----
---------------------- -------------------------
----
-- --------生成静态站点
现在，我们可以使用 wintersmith 来生成静态站点了。在命令行中输入以下命令：
- ----------- -----
执行完毕后，在 build 目录中会生成一个名为 style.css 的文件，用于覆盖原有的样式表。
预览网站
最后，我们可以使用 wintersmith 的本地预览功能来查看生成的网站。在命令行中输入以下命令：
- ----------- -------
打开浏览器，访问 http://localhost:8080/，即可预览网站。
结语
通过本文的介绍，我们学习了如何使用 wintersmith-sassify 包来编译 SASS 文件。此外，我们还了解了 wintersmith 的基本用法。希望本文对大家有所帮助。以下是完整的 wintersmith 配置文件代码：
-
--------- -
------- -
-------- --- -----
-
--
---------- -
---------------------
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006710f8dd3466f61ffe2ad