Sass、SCSS、Less 和 PostCSS.

更改触发文件监视器的操作

文件监视器会在您的项目手动（文件 | 全部保存 或 Ctrl+S ）或自动保存时立即唤醒并启动转译器。

在一般情况下，您的代码会在您将焦点从 PyCharm 移开时（在窗口失去焦点时）自动保存。 使用文件监视器时，当您编辑文件监视器范围内的文件时，也会自动保存。 因此，在您键入的整个过程中，转译器可能一直在运行，从而可能导致性能问题。 要解决该问题，请关闭自动保存已编辑文件。

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

默认情况下，即使其范围内的文件在 PyCharm 外部被编辑，文件监视器也会唤醒。 要更改此行为，并仅在内部编辑时转译文件，请清除 在外部更改时触发监视器 复选框。

更改作用域

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

按下 Ctrl+Alt+S 以打开设置，然后选择 工具 | 文件监视器。 选择所需的文件监视器（我们的示例中为 SCSS ），并点击工具栏上的 。 在 编辑文件监视器 对话框，选择适用的范围。 更多信息请参阅 作用域和文件颜色。

自定义输出位置

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

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

让我们编辑 custom_output.scss ，例如，将第 6 行中的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60);。 在默认文件监视器配置下，生成的 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); ，PyCharm 创建了一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。

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

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

在默认文件监视器下，生成的文件将存储在原始 .scss 文件所在的同一文件夹中。

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

为了让 PyCharm 保留文件夹结构，让我们创建另一个自定义文件监视器。

按下 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 ，PyCharm 会创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。

更改触发文件监视器的操作

文件监视器会在您的项目手动（文件 | 全部保存 或 Ctrl+S ）或自动保存时立即唤醒并启动转译器。

在一般情况下，您的代码会在您将焦点从 PyCharm 移开时（在窗口失去焦点时）自动保存。 使用文件监视器时，当您编辑文件监视器范围内的文件时，也会自动保存。 因此，在您键入的整个过程中，转译器可能一直在运行，从而可能导致性能问题。 要解决该问题，请关闭自动保存已编辑文件。

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

更改作用域

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

按下 Ctrl+Alt+S 以打开设置，然后选择 工具 | 文件监视器。 选择所需的文件监视器（我们的示例中为 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 。 让我们创建一个自定义 Less_custom_output 文件监视器，将 css 文件夹作为输出位置。

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

按如下方式更新默认设置：

• 在 参数 字段中，键入：

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

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

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

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

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

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

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

在默认文件监视器下，生成的文件将存储在原始 .less 文件所在的同一文件夹中。

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

为了让 PyCharm 保留文件夹结构，让我们创建另一个自定义文件监视器。

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

按如下方式更新默认设置：

• 在 参数 字段中，键入：

  $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 ，PyCharm 会创建一个 css 文件夹，其子文件夹结构会保留 styles_structured 的结构。