Sass、SCSS 和 Less
WebStorm 集成了将 Sass 、 Less 和 SCSS 代码转换为 CSS 的编译器。 要在 WebStorm 中使用编译器，您需要根据相关的预定义模板将其配置为 File Watcher 。
开始之前
-
请确保您的计算机上安装了 Node.js 。
-
安装并启用 File Watchers 插件，在 设置 | 插件 页面， Marketplace 选项卡中，如 从 JetBrains Marketplace 安装插件 中所述。
-
确保 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 文件监视器 ，该监视器将跟踪文件的更改并运行编译器。
当您打开一个文件时，WebStorm会检查当前项目中是否有适用的 File Watcher。 如果此类 File Watcher 已配置但已禁用，WebStorm 会显示一个弹出窗口，通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher，则 WebStorm 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
-
如果选中了 自动保存已编辑文件以触发监视器 复选框，一旦对源代码进行了任何更改，就会调用 File Watcher。
-
如果 自动保存已编辑文件以触发监视器 复选框被清除，File Watcher 会在保存时（ ， Ctrl+S ）或当您将焦点从 WebStorm 移开时（当框架失去焦点时）启动。
请从 文件监视器 了解更多。
WebStorm 会创建一个包含生成输出的单独文件。 该文件的名称与源 Sass 、 Less 或 SCSS 文件名称相同，并且扩展名是 .css 。 生成文件的位置是在 要刷新的输出路径 字段中的 New Watcher 对话框 中定义的。 然而，在 项目树 ，它们显示在源文件下，现在显示为一个节点。
创建文件监视器
-
在 设置 对话框（ Ctrl+Alt+S ）中，点击 文件监视器 下的 工具 。 File Watchers 页面 显示了已配置的 File Watchers 列表。
-
点击
或按
Alt+Insert
。 根据您将要使用的工具，从列表中选择
收起
、
Sass
或
SCSS
预定义模板。
-
在 程序 字段中，根据所选择的预定义模板指定编译器归档的路径。
-
lessc 用于 Less。
-
sass 适用于 Sass/SCSS。
如果您按照标准的 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 使用源映射，允许您在调试会话期间逐步执行应用程序。
-
尽管默认设置足以成功运行编译器，但我们仍然仔细看看它们，以了解如何自定义 File Watcher 的行为。
更改触发文件观察者的操作
文件监视器会在您的项目被手动（ 或 Ctrl+S ）或自动保存后立即启动编译器。
通常，当您从 WebStorm 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 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 文件监视器，并将 css 文件夹作为输出位置。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 SCSS File Watcher 如上所述 。
请按以下步骤更新默认设置：
-
在 实参 字段中，输入：
$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);
，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
保存新的文件监视器并确保其已启用。
现在，如果您编辑 custom_output_body.scss 、 custom_output_header.scss 或 custom_output_footer.scss ，WebStorm 将创建一个 css 文件夹，子文件夹结构将保留 样式结构 的结构。
示例：将 Less 编译成 CSS
假设，您的项目结构如下：
下面的示例展示了当您手动或自动保存项目时， my-styles.less 如何编译为 CSS，以及对 my-styles.less 的更改如何反映在生成的 CSS 文件中。
-
创建一种类型为 收起 的 File Watcher：打开 设置 对话框（ Ctrl+Alt+S ），转到 ，点击工具栏上的
，并从列表中选择
更少
。
或者，点击 是 在编辑器选项卡顶部的 启用 File Watcher 将 LESS 编译为 CSS？ 面板中用 .收起 文件。
-
在打开的 新建 文件监视器 对话框中，所有必填字段都已填写。
其实，这些设置足以成功运行编译器。
-
让我们更改 my-styles.less ，例如，更改第 1 行的
@color的值。 这会触发我们的 File Watcher。 因此，生成了两个文件并显示在 my-styles.less 下：-
my-styles.css 及编译后的 CSS 代码
-
my-styles.css.map 使用源映射，允许您在调试会话期间逐步执行应用程序。
-
尽管默认设置足以成功运行编译器，但我们仍然仔细看看它们，以了解如何自定义 File Watcher 的行为。
更改触发文件观察者的操作
文件监视器会在您的项目被手动（ 或 Ctrl+S ）或自动保存后立即启动编译器。
通常，当您从 WebStorm 移动焦点时（框架停用时），您的代码会自动保存。 使用 File Watchers 时，当您编辑 File Watcher 范围内的文件时，也会自动保存。 因此，转译器可能会在您输入时一直运行，这可能会导致性能问题。 要解决这个问题，请禁止自动保存编辑过的文件。
按
Ctrl+Alt+S
打开设置，然后选择
。 请选择所需的 File Watcher（
更少
在我们的示例中），然后点击工具栏上的
。 在
编辑文件监视器
对话框中，展开
高级选项
区域，并清除
自动保存已编辑文件以触发监视器
复选框。
更改范围
默认情况下，WebStorm 会监视整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 不过，您可以更改范围，例如，仅处理未提交的更改。 在大型项目中，这将节省时间。
按
Ctrl+Alt+S
打开设置，然后选择
。 请选择所需的 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 。 让我们创建一个自定义 自定义输出较少 文件监视器，并将 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
的值，WebStorm 会创建一个
css
文件夹，并将生成的
custom_output.css
和
custom_output.css.map
文件存储在其中。
自定义输出位置：保留原始文件夹结构
现在让我们考虑一个示例，其中 .收起 文件存储在文件夹结构中，例如：
默认的 File Watcher 会将生成的文件存储在原始 .收起 文件旁边。
如果我们使用自定义 File Watcher 如上所述 ，所有生成的文件将存储在同一个 css 文件夹中：
为了让 WebStorm 保留文件夹结构，我们再创建一个自定义的 File Watcher。
按 Ctrl+Alt+S 打开设置，然后选择 。 然后创建一个 Less File Watcher 如上所述 。
请按以下步骤更新默认设置：
-
在 实参 字段中，输入：