最终的

Sass、SCSS 等

更改触发文件观察器的操作

一旦您的项目被手动（文件 | 全部保存或）或自动保存，文件观察器就会唤醒并启动转译器。Ctrl0S

一般来说，当您将焦点从 IntelliJ IDEA 移开时（在框架停用时），您的代码会自动保存。使用文件观察器，当您在文件观察器的范围内编辑文件时，也会执行自动保存。因此，转译器可能会在您键入时一直运行，这可能会导致性能问题。要解决此问题，请禁止自动保存已编辑的文件。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。。选择所需的文件观察器（在我们的示例中为SCSS ）并单击工具栏上的 。在“编辑文件观察器”对话框中，展开“高级选项”区域并清除“自动保存编辑的文件以触发观察器”复选框。CtrlAlt0S

默认情况下，即使从 IntelliJ IDEA 外部编辑其范围内的文件，文件观察器也会被唤醒。要覆盖此行为并仅在内部编辑时转译文件，请清除“外部更改触发观察器”复选框。

更改范围

默认情况下，IntelliJ IDEA 会监视整个项目中所有扩展名为.scss 的文件的更改。这适用于我们的示例。但是，您可以更改处理范围，例如仅处理未提交的更改。在大型项目中，这将节省时间。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，选择所需的文件观察器（在我们的示例中为SCSS）并单击工具栏上的 。在“编辑文件观察器”对话框中，从列表中选择适用的范围。从范围和文件颜色中了解更多信息。CtrlAlt0S

自定义输出位置

默认情况下，生成的.css和.css.map文件存储在原始文件所在的文件夹中，并在项目工具窗口中显示为其子文件。您可以更改此默认行为，将所有生成的.css和.css.map文件存储在单独的文件夹中。

让我们从一个简单的案例开始。假设项目根目录中有一个custom_output.scss文件。

让我们编辑custom_output.scss，例如，将fill-opacity: abs(50);第 6 行替换为fill-opacity: abs(60);. 使用默认的文件观察器配置，生成的文件custom_output.css和custom_output.css.map将存储在项目根目录中并显示为custom_output.scss的子级。

将所有输出存储在单独的文件夹中会很方便，例如css。让我们创建一个自定义SCSS_custom_output文件观察器，并将css文件夹作为输出位置。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，然后按照上面的描述创建一个 SCSS 文件观察器。CtrlAlt0S

更新默认设置如下：

• 在参数字段中，输入：

  $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css

• 在刷新的输出路径字段中，键入：

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

保存新的文件观察器并确保其已启用。

现在，如果您编辑custom_output.scss，例如，将fill-opacity: abs(50);第 6 行替换为fill-opacity: abs(60);，IntelliJ IDEA 将创建一个css文件夹并将生成的custom_output.css和custom_output.css.map文件存储在其中。

自定义输出位置：保留原始文件夹结构

现在让我们考虑一个示例，其中.scss文件存储在文件夹结构中，例如：

使用默认的文件观察器，生成的文件将存储在原始.scss 文件旁边。如果我们如上所述使用自定义文件观察器，则所有生成的文件将存储在同一个css文件夹中：

为了让 IntelliJ IDEA 保留文件夹结构，让我们创建另一个自定义文件观察器。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，然后按照上面的描述创建一个 SCSS 文件观察器。CtrlAlt0S

更新默认设置如下：

• 在参数字段中，输入：

  $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css

• 在刷新的输出路径字段中，键入：

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

保存新的文件观察器并确保其已启用。

现在，如果您编辑custom_output_body.scss、custom_output_header.scss或custom_output_footer.scss，IntelliJ IDEA 会创建一个css文件夹，其子文件夹结构保留styles_structed的结构。

更改触发文件观察器的操作

一旦您的项目被手动（文件 | 全部保存或）或自动保存，文件观察器就会唤醒并启动转译器。Ctrl0S

一般来说，当您将焦点从 IntelliJ IDEA 移开时（在框架停用时），您的代码会自动保存。使用文件观察器，当您在文件观察器的范围内编辑文件时，也会执行自动保存。因此，转译器可能会在您键入时一直运行，这可能会导致性能问题。要解决此问题，请禁止自动保存已编辑的文件。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。。选择所需的文件观察器（在我们的示例中为Less ），然后单击工具栏上的 。在“编辑文件观察器”对话框中，展开“高级选项”区域并清除“自动保存编辑的文件以触发观察器”复选框。CtrlAlt0S

更改范围

默认情况下，IntelliJ IDEA 会监视整个项目中所有扩展名为.scss 的文件的更改。这适用于我们的示例。但是，您可以更改处理范围，例如仅处理未提交的更改。在大型项目中，这将节省时间。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，选择所需的文件观察器（在我们的示例中为Less）并单击工具栏上的 。在“编辑文件观察器”对话框中，从列表中选择适用的范围。从范围和文件颜色中了解更多信息。CtrlAlt0S

自定义输出位置

默认情况下，生成的.css和.css.map文件存储在原始文件所在的文件夹中，并在项目工具窗口中显示为其子文件。您可以更改此默认行为，将所有生成的.css和.css.map文件存储在单独的文件夹中。

让我们从一个简单的案例开始。假设项目根目录中有一个custom_output.less文件。

让我们编辑custom_output.less，例如，更改@color第1行的值。使用默认的文件观察器配置，生成的文件custom_output.css和custom_output.css.map将存储在项目根目录中并显示为 custom_output的子级。较少的。

将所有输出存储在单独的文件夹中会很方便，例如css。让我们创建一个自定义的Less_custom_output文件观察器，并将css文件夹作为输出位置。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，然后按照上面的描述创建一个 Less File Watcher 。CtrlAlt0S

更新默认设置如下：

• 在参数字段中，输入：

  $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map

• 在刷新的输出路径字段中，键入：

  $ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

保存新的文件观察器并确保其已启用。

现在，如果您编辑custom_output.less@color ，例如，更改第 1 行处的值，IntelliJ IDEA 将创建一个css文件夹并将生成的custom_output.css和custom_output.css.map文件存储在其中。

自定义输出位置：保留原始文件夹结构

现在让我们考虑一个.less文件存储在文件夹结构中的示例，例如：

使用默认的文件观察器，生成的文件将存储在原始.less文件旁边。如果我们如上所述使用自定义文件观察器，则所有生成的文件将存储在同一个css文件夹中：

为了让 IntelliJ IDEA 保留文件夹结构，让我们创建另一个自定义文件观察器。

按打开 IDE 设置，然后选择“工具”|“IDE”。文件观察者。，然后按照上面的描述创建一个 Less File Watcher 。CtrlAlt0S

更新默认设置如下：

• 在参数字段中，输入：

  $FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map

• 在刷新的输出路径字段中，键入：

  $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

保存新的文件观察器并确保其已启用。

现在，如果您编辑custom_output_body.less、custom_output_header.less或custom_output_footer.less，IntelliJ IDEA 会创建一个css文件夹，其子文件夹结构保留styles_structed的结构。