Sass、SCSS 和 Less

WebStorm 可与将 Sass、 Less 和 SCSS 代码转换为 CSS 的编译器集成。若要在 WebStorm 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher。

开始之前

请确保您的计算机上安装了 Node.js。
按照从 JetBrains Marketplace 安装插件中的说明，在设置 | 插件页签 Marketplace 上安装并启用 File Watchers 插件。
请确保在设置 | 插件页签已安装中启用了所需的 File Watchers 和 Less 或 Sass 插件。有关更多信息，请参阅管理插件。

安装 Sass/SCSS

在嵌入式终端（Alt+F12 ）中，键入：
npm install -g sass
更多信息请参阅 Sass 官方网站。

安装 Less

在嵌入式终端（Alt+F12 ）中，键入：
npm install --global less
更多信息请参阅 Less 官方网站。

将代码编译为 CSS

若要自动编译代码，需安装编译器并配置 Sass、Less 或 SCSS File Watcher ，它将跟踪文件变化并运行编译器。

当您打开文件时，WebStorm 会检查当前项目中是否存在适用的 File Watcher。如果已配置但未启用相应的 File Watcher，WebStorm 会显示弹窗告知您此配置并建议启用。

如果当前项目中已配置并启用了适当的 File Watcher，WebStorm 会在新建 Watcher 对话框中指定的事件发生时自动启动编译器。

如果选中了自动保存已编辑的文件以触发监视器复选框，则在源代码发生任意更改时将调用 File Watcher。
如果清除自动保存已编辑的文件以触发监视器复选框，则在保存（文件 | 全部保存、 Ctrl+S ）或切换离开 WebStorm（窗口失焦）时启动 File Watcher。

更多信息请参阅文件监视器。

WebStorm 会创建一个包含生成输出的独立文件。该文件名称与源 Sass、 Less 或 SCSS 文件相同，扩展名为 .css 。生成文件的存放位置在新建 Watcher 对话框的要刷新的输出路径字段中定义。但在项目树中，它们显示在源文件之下，源文件现在作为一个节点显示。

创建文件监视器

在设置对话框（Ctrl+Alt+S ）中，点击文件监视器，位于工具下。打开的 File Watchers 页面显示了已配置的所有 File Watcher 列表。
点击或按下 Alt+Insert。根据您将使用的工具，从列表中选择 Less、 Sass 或 SCSS 的预定义模板。
在程序字段中，根据所选的预定义模板指定编译器文件的路径。
- 用于 Less 的 lessc 。
- 用于 Sass/SCSS 的 sass 。
如果您遵循了使用 npm 的标准安装流程，WebStorm 会自动定位所需文件并填充该字段。否则，请手动输入路径或点击，并在打开的对话框中选择文件位置。
请按照文件监视器中的说明操作。

示例：将 SCSS 编译为 CSS

假设您的项目结构如下：

如图所示， _grid.scss 被导入到了 Page.scss 。以下示例展示了当您手动或自动保存项目时， Page.scss 如何编译为 CSS，以及对 _grid.scss 的更改如何反映到生成的 CSS 文件中。

创建类型为 SCSS 的 File Watcher：打开设置对话框（Ctrl+Alt+S ），转到工具 | 文件监视器，点击工具栏中的，然后从列表中选择 SCSS。
在打开的新建文件监视器对话框中，所有必填字段均已填写。
实际上，这些设置已足以成功运行编译器。
让我们修改 grid.scss ，例如将第 31 行的 margin-left: 0; 替换为 margin-left: 12px;。这将触发我们的 File Watcher，并由编译器处理 Page.scss 。因此，将生成两个文件，并嵌套显示在 Page.scss 下：
- Page.css ，其中包含编译后的 CSS 代码
- Page.css.map ，其中包含在调试会话期间可逐步执行应用的 source map

尽管默认设置足以成功运行编译器，但我们仍将仔细查看这些设置，以便了解如何自定义 File Watcher 的行为。

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

每当手动（文件 | 全部保存或 Ctrl+S ）或自动保存项目时，File Watcher 会立即激活并启动转换器。

通常，在将焦点从 WebStorm 移开（框架失活）时，代码会自动保存。使用 File Watcher 时，从其监视范围中编辑文件也会触发自动保存。因此，转换器可能在每次键入内容时持续运行，可能会导致性能问题。为解决该问题，请禁止自动保存已编辑的文件。

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

默认情况下，即使从 WebStorm 之外编辑其监视范围内的文件，File Watcher 也会激活。如需更改此行为，并仅在内部编辑时进行转换，请取消选中在外部更改时触发监视器复选框。

更改作用域

默认情况下，WebStorm 会监视整个项目中所有具有 .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 File Watcher，并指定 css 文件夹为输出路径。

按 Ctrl+Alt+S 打开设置，然后选择工具 | 文件监视器。然后根据上述说明创建一个 SCSS File Watcher。

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

在参数字段中输入：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css
在要刷新的输出路径字段中输入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

保存新建的 File Watcher，并确保其已启用。

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

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

下面我们来看一个示例，其中的 .scss 文件存储在以下结构的文件夹中，例如：

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

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

为了让 WebStorm 保留文件夹结构，请创建另一个自定义 File Watcher。

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

请如下更新默认设置：

在参数字段中输入：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css
在要刷新的输出路径字段中输入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map

保存新的 File Watcher 并确保其已启用。

现在，如果您编辑 custom_output_body.scss 、 custom_output_header.scss 或 custom_output_footer.scss ，WebStorm 将创建一个 css 文件夹，其中包含保留 styles_structured 结构的子文件夹结构。

示例：将 Less 编译为 CSS

假设您的项目结构如下：

以下示例展示了在手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何体现到生成的 CSS 文件中。

创建一个类型为 Less 的 File Watcher：打开设置对话框（Ctrl+Alt+S ），转到工具 | 文件监视器，点击工具栏上的，然后从列表中选择 Less。
或者，点击位于带有 .less 文件的编辑器标签页顶部启用文件监视器以将 LESS 编译为 CSS？面板中的是。
在打开的新建文件监视器对话框中，所有必填字段均已填写。
实际上，这些设置足以成功运行编译器。
我们来更改 my-styles.less ，例如，更改第 1 行中 @color 的值。这将触发我们的 File Watcher。结果生成两个文件，并在 my-styles.less 下以嵌套方式显示：
- my-styles.css ，其中包含编译后的 CSS 代码
- my-styles.css.map ，其中包含 source map，可让您在调试会话期间逐步执行应用程序。

尽管默认设置足以成功运行编译器，我们仍可以进一步了解这些设置，以查看如何自定义 File Watcher 的行为。

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

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

通常，当您将焦点从 WebStorm 切换出去（也就是窗口失活）时，代码会自动保存。使用 File Watcher 时，在您编辑其作用域中的文件时也会自动保存。因此，转换器在您输入内容时可能会一直运行，可能导致性能问题。为解决此问题，请禁止自动保存已编辑文件。

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

更改作用域

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

按下 Ctrl+Alt+S 打开设置，然后选择工具 | File Watchers。选择所需的 File Watcher（在本示例中为 Less ），然后点击工具栏上的。在编辑 File Watcher 对话框中，从列表中选择适用的作用域。详细了解内容，请参见范围与文件颜色。

自定义输出位置

默认情况下，生成的 .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 File Watcher，并将 css 文件夹作为输出位置。

按 Ctrl+Alt+S 打开设置，然后选择工具 | File Watchers。然后根据上述说明创建一个 Less File Watcher。

请按照以下方式更新默认设置：

在参数字段中输入：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-map
在要刷新的输出路径字段中输入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map

保存新建的 File Watcher 并确保其已启用。

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

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

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

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

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

为了使 WebStorm 保留文件夹结构，让我们创建另一个自定义 File Watcher。

按 Ctrl+Alt+S 打开设置，然后选择工具 | File Watchers。然后根据上述说明创建一个 Less File Watcher。

请按照以下方式更新默认设置：

在参数字段中输入：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-map
在要刷新的输出路径字段中输入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map