Sass、SCSS 和 Less
JetBrains Rider 集成了将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器。 要在 JetBrains Rider 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher。
开始之前
安装 Sass/SCSS
在内置的 终端 （Alt+F12 ）中，输入：
npm install -g sass了解更多信息，请访问 Sass 官方网站。
安装 Less
在内置的 终端 （Alt+F12 ）中，输入：
npm install --global less详细了解请访问 Less 官方网站。
将您的代码编译为 CSS
要自动编译您的代码，您需要安装编译器并配置一个 Sass、Less 或 SCSS 文件监视器 ，该监视器将跟踪文件的更改并运行编译器。
当您打开文件时，JetBrains Rider 会检查当前项目中是否有适用的文件监视器。 如果已配置此类文件监视器但被禁用，JetBrains Rider 会显示一个弹出窗口，告知您已配置的文件监视器，并建议您启用它。
如果在当前项目中配置并启用了适用的文件监视器，JetBrains Rider 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中 自动保存已编辑的文件以触发监视器 复选框，只要对源代码进行任何更改，文件监视器就会立即启动。
如果清除 自动保存已编辑的文件以触发监视器 复选框，文件监视器会在保存时（、 Ctrl+S ）或当您将焦点从 JetBrains Rider 移开时（在帧停用时）启动。
JetBrains Rider 会创建一个包含生成输出的单独的文件。 该文件的名称与源 Sass、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。 生成文件的位置是在 要刷新的输出路径 字段中的 New Watcher 对话框中定义的。 然而，在 项目树 ，它们显示在源文件下，现在显示为一个节点。
创建文件监视器
在 设置/首选项 对话框（Ctrl+Alt+S ）中，点击 文件监视器 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert。 根据您将要使用的工具，从列表中选择 更少、 Sass 或 SCSS 预定义模板。在 程序 字段中，根据所选择的预定义模板指定编译器归档的路径。
lessc 用于 Less。
sass 适用于 Sass/SCSS。
如果您按照标准的 npm 安装程序进行操作，JetBrains Rider 会自动定位所需文件并自动填写字段。 否则，请手动输入路径或点击
在打开的对话框中选择文件位置。按照 文件监视器 中的说明进行操作。
示例：将 SCSS 编译为 CSS
假设您的项目结构如下：
如您所见， _grid.scss 被导入到了 Page.scss 中。 下面的示例展示了当您手动或自动保存项目时， Page.scss 如何编译为 CSS，以及对 _grid.scss 的更改如何反映到生成的 CSS 文件中。
创建一个类型为 SCSS 的文件监视器：打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择 SCSS。
在打开的 新建文件监视程序 对话框中，所有必填字段都已填写。
其实，这些设置足以成功运行编译器。
让我们更改 grid.scss ，例如，将第 31 行的
margin-left: 0;替换为margin-left: 12px;。 这会触发我们的文件监视器，编译器会处理 Page.scss 。 结果将生成两个文件，并以嵌套形式显示在 Page.scss 下：包含已编译 CSS 代码的 Page.css
包含源映射的 Page.css.map ，使您能够在调试会话期间逐步执行应用。
虽然默认设置足以成功运行编译器，我们仍来仔细查看它们，看看如何自定义文件监视器的行为。
更改触发文件观察者的操作
文件监视器唤醒并启动 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 文件夹，其子文件夹结构与 样式结构 的结构一致。
示例：将 Less 编译成 CSS
假设，您的项目结构如下：
下面的示例展示了当您手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何反映在生成的 CSS 文件中。
创建一个类型为 收起 的文件监视器：打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择 收起。
或者，点击 是 在编辑器选项卡顶部的 启用文件监视器以将 LESS 编译为 CSS？ 面板中用 .收起 文件。
在打开的 新建文件监视程序 对话框中，所有必填字段都已填写。
其实，这些设置足以成功运行编译器。
让我们更改 my-styles.less ，例如，更改第 1 行的
@color的值。 这会触发我们的 File Watcher。 因此，生成了两个文件并显示在 my-styles.less 下：包含已编译 CSS 代码的 my-styles.css
包含源映射的 my-styles.css.map ，使您能够在调试会话期间逐步执行应用。
虽然默认设置足以成功运行编译器，我们仍来仔细查看它们，看看如何自定义文件监视器的行为。
更改触发文件观察者的操作
文件监视器唤醒并启动 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 文件夹，其子文件夹结构与 样式结构 的结构一致。
配置语法高亮
您可以根据您的偏好和习惯配置 Less/Sass/SCSS 语法高亮显示。
在 设置/首选项 对话框（Ctrl+Alt+S ），转到 。
选择配色方案，接受从默认设置继承的高亮设置，或按照 配色方案：IDE 文本的字体和颜色 中的说明进行自定义。
云补全和整行补全
JetBrains Rider 提供 Cloud Completion 和 Full Line 补全 ，在 Sass/SCSS 和 Less 代码中。
整行代码补全功能使用本地运行的深度学习模型来建议整行代码。 该功能在 JetBrains Rider 中开箱即用，无需额外的许可证。
启用整行代码补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 启用本地Full Line 补全建议 复选框，并确保选中 类 CSS 复选框。
由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
Cloud Completion 会在考虑上下文的情况下，建议语法上可接受的解决方案，并预先运行各种 代码检查 ，以拒绝会导致错误的候选项。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
选中 Enable cloud completion suggestions 复选框，并确保选中 HTML 复选框。
