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文件监视器。
创建文件监视器
在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“工具”下的“文件监视器”。打开的“文件监视器”页面显示已配置的文件监视器列表。
单击或按下Alt+Insert,然后从列表中选择Stylus预定义模板。
按照使用文件监视器中的说明继续操作。
编译代码
当您打开文件时,IntelliJ IDEA会检查当前项目中是否有适用的文件观察器。如果配置但禁用了此类文件观察器,IntelliJ IDEA将显示一个弹出窗口,通知您已配置的文件观察器并建议启用它。
如果在当前项目中配置并启用了适用的文件观察器,则IntelliJ IDEA会在“新建观察器”对话框中指定的事件时自动启动它。
- 如果选中“自动保存已编辑的文件以触发观察器”复选框,则只要对源代码进行任何更改,就会调用“文件观察器”。
- 如果“自动保存已编辑的文件以触发观察器”复选框被清除,文件观察器是在保存(文件|全部保存,Ctrl+S),或者当你从IntelliJ IDEA移动对焦(帧停用时)启动。
IntelliJ IDEA使用生成的输出创建单独的文件。该文件具有源Stylus文件的名称和扩展名css。生成的文件的位置在“新建观察器”对话框的“要刷新的输出路径”文本框中定义。但是,在项目树中,它们显示在源文件下,该文件现在显示为节点。