IntelliJ IDEA：使用Sass，Less和SCSS

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