npm 包 wintersmith-styl 使用教程

什么是 wintersmith-styl？

wintersmith-styl 是一个基于 Node.js 平台的前端工具，它可以将 Stylus 样式文件编译成纯 CSS 样式文件，并且可以在 wintersmith 静态网站生成器中使用。

安装 wintersmith-styl

要使用 wintersmith-styl，你需要已经安装 Node.js 平台和 wintersmith 静态网站生成器。

在终端中执行以下命令安装 wintersmith-styl：

$ npm install wintersmith-styl --save-dev

使用 wintersmith-styl

在 wintersmith 中配置 wintersmith-styl

在你的 wintersmith 项目配置文件 config.json 中添加以下内容：

{
  "plugins": [
    "wintersmith-styl"
  ]
}

编写 Stylus 样式文件

在 wintersmith 项目的 contents 目录中创建一个以 .styl 结尾的 Stylus 样式文件，例如 style.styl，并在里面编写你的样式代码。

以下是一个简单的示例：

$primary-color = #0077ff

body
  background-color #ffffff
  color $primary-color

使用 wintersmith 生成静态网站

在终端中执行以下命令生成静态网站：

$ wintersmith build

wintersmith-styl 会自动将 contents 目录中的 .styl 文件编译成 .css 文件并生成到 build 目录中。

在 HTML 页面中引用样式文件

在 HTML 页面中使用以下代码引用编译后的样式文件：

<link rel="stylesheet" href="/style.css">

总结

本文介绍了如何使用 npm 包 wintersmith-styl 将 Stylus 样式文件编译成纯 CSS 样式文件，并在 wintersmith 静态网站生成器中使用。通过本文的学习和实战，你可以更加深入地了解 Node.js 和前端工具，为以后的前端开发之路打下坚实的基础。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671108dd3466f61ffe2ba