阅读(3226) (0)

IntelliJ IDEA:使用Stylus

2019-02-26 14:46:36 更新

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。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是,在项目树中,它们显示在源文件下,该文件现在显示为节点。