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