Sass、SCSS、Less 和 PostCSS

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

文件监视器唤醒并启动 transpiler，一旦您的项目被手动保存（文件 | 全部保存 或 Ctrl+S ）或自动保存。

一般来说，当您将焦点从 JetBrains Rider 移开时（框架停用），代码会自动保存。 使用文件监视器时，当您编辑属于文件监视器范围的文件时，也会执行自动保存。 因此，在您输入时，转译器可能一直在运行，这可能导致性能问题。 为解决该问题，抑制自动保存已编辑的文件。

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

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

更改范围

默认情况下，JetBrains Rider 会监视整个项目中所有具有 .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); ，JetBrains Rider 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。

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

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

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

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

要让 JetBrains Rider 保留文件夹结构，我们再创建一个自定义文件监视器。

按下 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 ，JetBrains Rider 会创建一个 css 文件夹，其子文件夹结构与 样式结构 的结构一致。

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

文件监视器唤醒并启动 transpiler，一旦您的项目被手动保存（文件 | 全部保存 或 Ctrl+S ）或自动保存。

一般来说，当您将焦点从 JetBrains Rider 移开时（框架停用），代码会自动保存。 使用文件监视器时，当您编辑属于文件监视器范围的文件时，也会执行自动保存。 因此，在您输入时，转译器可能一直在运行，这可能导致性能问题。 为解决该问题，抑制自动保存已编辑的文件。

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

更改范围

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

按下 Ctrl+Alt+S 打开设置，然后选择 工具 | 文件监视器。 选择所需的文件监视器（我们的示例中为 收起 ），并单击工具栏上的 。 在 编辑文件监视程序 对话框中，从列表中选择适用的作用域。 更多信息请参阅 文件作用域与文件颜色。

自定义输出位置

默认情况下，生成的 .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 的值，JetBrains Rider 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件存储在其中。

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

现在考虑一个示例，其中 .收起 文件存储在文件夹结构中，例如：

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

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

要让 JetBrains Rider 保留文件夹结构，我们再创建一个自定义文件监视器。

按下 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 ，JetBrains Rider 会创建一个 css 文件夹，其子文件夹结构与 样式结构 的结构一致。