IntelliJ IDEA：使用Stylus

Stylus

此功能仅在Ultimate版本中受支持。

在开始之前，请确保您的计算机上有Node.js。

IntelliJ IDEA允许您动态地将Stylus代码转换为CSS。

提示：您也可以在Node.js和NPM页面上安装Stylus软件包。

安装Stylus

• 打开嵌入式终端（Alt+F12）并在命令提示符下键入npm install --global stylus以进行全局安装。从Stylus官方网站了解更多信息。

编译Stylus代码

要动态编译代码，需要将编译器配置为IntelliJ IDEA文件监视器。

创建文件监视器

1. 在“设置/首选项”对话框（Ctrl+Alt+S）中，单击“工具”下的“文件监视器”。打开的“文件监视器”页面显示已配置的文件监视器列表。

2. 单击或按下Alt+Insert，然后从列表中选择Stylus预定义模板。

3. 按照使用文件监视器中的说明继续操作。

编译代码

当您打开文件时，IntelliJ IDEA会检查当前项目中是否有适用的文件观察器。如果配置但禁用了此类文件观察器，IntelliJ IDEA将显示一个弹出窗口，通知您已配置的文件观察器并建议启用它。

如果在当前项目中配置并启用了适用的文件观察器，则IntelliJ IDEA会在“新建观察器”对话框中指定的事件时自动启动它。

• 如果选中“自动保存已编辑的文件以触发观察器”复选框，则只要对源代码进行任何更改，就会调用“文件观察器”。
• 如果“自动保存已编辑的文件以触发观察器”复选框被清除，文件观察器是在保存（文件|全部保存，Ctrl+S），或者当你从IntelliJ IDEA移动对焦（帧停用时）启动。

IntelliJ IDEA使用生成的输出创建单独的文件。该文件具有源Stylus文件的名称和扩展名css。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是，在项目树中，它们显示在源文件下，该文件现在显示为节点。