Stylus
WebStorm 可即时将您的 Stylus 代码转换为 CSS。
开始之前
请确保您的计算机中已安装 Node.js。
在 设置 | 插件 页面、 Marketplace 选项卡中安装并启用 Stylus 插件，如 从 JetBrains Marketplace 安装插件 中所述。
请确保已在设置中启用 File Watchers 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 单击 已安装 选项卡。 在搜索字段中输入 File Watchers。 有关插件的更多信息，请参阅 管理插件。
安装 Stylus
在嵌入式 终端 （Alt+F12 ）中键入：
npm install --global stylus在 Stylus 官方网站了解更多信息。
编译 Stylus 代码
要自动编译代码，您需要安装编译器并配置 Stylus File Watcher ，以跟踪文件变更并运行编译器。
打开文件时，WebStorm 会检查当前项目中是否有可用的 File Watcher。 如果配置了 File Watcher 但被禁用，WebStorm 将显示一个弹出窗口，通知您有关已配置的 File Watcher，并建议启用它。
如果当前项目中配置并启用了可用的 File Watcher，WebStorm 会在 新建 Watcher 对话框 中指定的事件发生时自动启动编译器。
如果选中了 自动保存已编辑文件以触发监视器 复选框，则在对源代码进行任何更改后立即调用 File Watcher。
如果清除了 自动保存已编辑文件以触发监视器 复选框，则在保存文件（、 Ctrl+S ）或移出 WebStorm 焦点（即框架失活）时启动 File Watcher。
请参阅 文件监视器 了解更多信息。
WebStorm 会为生成的输出创建一个单独的文件。 该文件的名称与源 Stylus 文件相同，扩展名为 .css 。 生成文件的位置在 要刷新的输出路径 字段中定义，在 新建 Watcher 对话框 中。 但是，在 项目树 中，它们显示在源文件下方，并且源文件现在显示为一个节点。
创建 File Watcher
在 设置 对话框（Ctrl+Alt+S ）中，点击 文件监视器 位于 工具 下方。 打开的 File Watchers 页面 显示了所有已配置的 File Watcher 列表。
点击
按钮或按下 Alt+Insert ，然后从列表中选择 Stylus 预定义模板。在 程序 字段中指定可执行文件的路径：
适用于 macOS 和 Unix 的 stylus 。
适用于 Windows 的 stylus.bat 。
您可以手动输入路径或点击
并在打开的对话框中选择文件位置。请按照 文件监视器 中所述进行操作。
配置语法高亮
您可以根据自身偏好和习惯配置 Stylus 的语法高亮。
在 设置 对话框（Ctrl+Alt+S ）中，转到 。
选择配色方案，接受默认设置中继承的高亮设置，或按照 颜色和字体 中的说明进行自定义。
配置代码风格
按 Ctrl+Alt+S 打开设置，然后选择 。
在 代码样式。 Stylus 上使用控件来配置 Stylus 文件中的代码风格。