Sass、SCSS、Less 和 PostCSS

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

文件监视器会在您的项目被手动（文件 | 全部保存 或 Ctrl+S ）或自动保存后立即启动编译器。

通常，当您从 CLion 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 File Watcher 作用域内的文件时，也会自动保存。 因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。 要解决这个问题，请禁止自动保存编辑过的文件。

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 请选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域，并清除 自动保存已编辑的文件以触发监视器 复选框。

默认情况下，即使从 CLion 外部编辑其作用域内的文件，File Watcher 仍会启动。 要重写此行为并仅在内部编辑时编译文件，请清除 在外部更改时触发监视器 复选框。

更改作用域

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

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 请选择所需的 File Watcher（SCSS 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的作用域。 从 文件作用域与文件颜色 了解更多。

自定义输出位置

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

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

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

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

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 然后创建一个 SCSS 文件监视器 如上所述。

请按以下步骤更新默认设置：

• 在 参数 字段中，键入：

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

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

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

保存新的文件监视器并确保其已启用。

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

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

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

默认的 File Watcher 会将生成的文件存储在原始 .scss 文件旁边。

如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：

为了让 CLion 保留文件夹结构，我们再创建一个自定义的 File Watcher。

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 然后创建一个 SCSS 文件监视器 如上所述。

请按以下步骤更新默认设置：

• 在 参数 字段中，键入：

  $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 ，CLion 将创建一个 css 文件夹，子文件夹结构将保留 样式结构 的结构。

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

文件监视器会在您的项目被手动（文件 | 全部保存 或 Ctrl+S ）或自动保存后立即启动编译器。

通常，当您从 CLion 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 File Watcher 作用域内的文件时，也会自动保存。 因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。 要解决这个问题，请禁止自动保存编辑过的文件。

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 请选择所需的 File Watcher（Less 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，展开 高级选项 区域，并清除 自动保存已编辑的文件以触发监视器 复选框。

更改作用域

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

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 请选择所需的 File Watcher（Less 在我们的示例中），然后点击工具栏上的 。 在 编辑文件监视器 对话框中，从列表中选择适用的作用域。 从 文件作用域与文件颜色 了解更多。

自定义输出位置

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

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

让我们编辑 custom_output.less ，例如，将第 1 行的 @color 的值更改。 默认的 File Watcher 配置生成的文件 custom_output.css 和 custom_output.css.map 将会存储在项目根目录并显示为 custom_output.less 的子文件。

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

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 然后创建一个 Less File Watcher 如上所述。

请按以下步骤更新默认设置：

• 在 参数 字段中，键入：

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

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

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

保存新的文件监视器并确保其已启用。

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

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

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

默认的 File Watcher 会将生成的文件存储在原始 .less 文件旁边。

如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：

为了让 CLion 保留文件夹结构，我们再创建一个自定义的 File Watcher。

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 然后创建一个 Less File Watcher 如上所述。

请按以下步骤更新默认设置：

• 在 参数 字段中，键入：

  $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 ，CLion 将创建一个 css 文件夹，子文件夹结构将保留 样式结构 的结构。