IntelliJ IDEA:使用Sass,Less和SCSS

2019-02-22 17:21 更新

Sass,Less和SCSS

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

IntelliJ IDEA与将Sass,Less和SCSS代码转换为CSS的编译器集成。要在IntelliJ IDEA中使用编译器,您需要将其配置为文件监视器。对于每个受支持的编译器,IntelliJ IDEA提供预定义的文件监视器模板。要在项目中运行编译器,请根据相关模板创建特定于项目的文件监视器。

在开始之前

  1. 下载并安装Node.js。

  2. 如“管理插件”中所述, 在“插件”页面上安装并启用“文件监视器”存储库插件 。

安装Sass / SCSS

  • 打开嵌入式终端(Alt+F12),然后在命令提示符下键入:npm install -g sass 以进行全局安装。

安装Less

  • 打开嵌入式终端(Alt+F12)并在命令提示符下键入:npm install --global less 以进行全局安装。

将代码编译为CSS

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

创建文件监视器

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

  2. 单击添加按钮或按下Alt+Insert。根据您要使用的工具,从列表中选择Less,Sass或SCSS预定义模板。

  3. 在“程序”文本框中,根据所选的预定义模板指定编译器可执行文件或存档的路径。

    • 对于Less:lessc.cmd。

    • 对于Sass / SCSS:sass.cmd。

    如果您使用npm遵循标准安装过程,IntelliJ IDEA将自动查找所需文件并自动填写该字段。否则,请手动键入路径,或单击浏览按钮并在打开的对话框中选择文件位置。 

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

编译代码

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

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

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

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号