压缩 CSS
缩小化或 压缩是指移除所有不必要的字符，如空格、新行、注释，而不改变源代码的功能。 在开发和调试过程中，这些字符使代码更易读。 在生产阶段，它们只会增加需要传输的代码量。
最常见的是，压缩是作为构建过程中使用 webpack 之类工具的一个步骤来完成的。 如果您不使用构建工具，您可以使用独立工具，例如 CSSO 或 cssnano。
要自动压缩您的代码，您需要安装一个压缩工具并配置一个 File Watcher ，该工具将跟踪您的文件更改并运行压缩工具。
默认情况下，一旦 File Watcher 范围内的 CSS 文件被更改并保存，压缩就会开始。 您可以指定其他 触发工具的事件。 从 File Watchers 中了解更多信息。
生成的压缩代码存储在一个单独的文件中，该文件的名称为源 CSS 文件名，并附加扩展名 min.css 。 此生成文件的位置在 要刷新的输出路径 字段中的 新建观察者对话框中定义。 不过，在 项目树 ，带有压缩代码的文件显示在作为节点显示的源 CSS 文件下。 要更改此默认显示方式，请在 配置文件嵌套中进行设置，位于 项目 工具窗口 Alt+1。
下面的示例显示了如何使用 CSSO 直接从 IntelliJ IDEA 压缩您的 CSS 代码。
示例：使用 CSSO 压缩 CSS
要自动压缩您的代码，您需要安装 CSSO 并配置一个 CSSO File Watcher ，它将跟踪文件更改并运行该工具。
默认情况下，一旦 File Watcher 范围内的 CSS 文件被更改并保存，压缩就会开始。 您可以指定其他 events that invoke CSSO。 从 File Watchers 中了解更多信息。
生成的压缩代码存储在一个单独的文件中，该文件的名称为源 CSS 文件名，并附加扩展名 min.css 。 此生成文件的位置在 要刷新的输出路径 字段中的 新建观察者对话框中定义。 不过，在 项目树 ，带有压缩代码的文件显示在作为节点显示的源 CSS 文件下。 要更改此默认显示方式，请在 配置文件嵌套中进行设置，位于 项目 工具窗口 Alt+1。
开始之前
请确保您的计算机上安装了 Node.js。
请确保在设置中启用了 CSS插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索框中输入 CSS。 如需了解有关插件的更多信息，请参阅 管理插件。
安装并启用 File Watchers插件，在 设置 | 插件 页面， Marketplace 选项卡中，如 从 JetBrains Marketplace 安装插件中所述。
全局安装 csso-cli
在嵌入的 终端 （Alt+F12 ）中输入：
npm install -g csso-cli
创建 CSSO File Watcher
在 设置 对话框（Ctrl+Alt+S ）中，点击 File Watchers 下的 工具。 File Watchers 页面 显示了已配置的 File Watchers 列表。
点击
或按 Alt+Insert 并从列表中选择 CSSO CSS 优化器 预定义模板。
新观察者 对话框打开。
请在 程序 字段中指定
csso可执行文件的位置。如果您通过
csso-cliNode Package Manager 安装，IntelliJ IDEA 将自动定位包并使用csso别名自动填写字段。否则，请手动输入路径或点击
并在打开的对话框中选择文件位置。接受默认的文件监视器设置，或根据需要按照 File Watchers 中的描述重新配置它们。
在此示例中，默认值如下：
-i $FileName$ -o $FileNameWithoutExtension$.min.css位于 实参 字段中。$FileNameWithoutExtension$.min.css位于 要刷新的输出路径 字段中。$FileDir$位于 工作目录 字段中。
点击 OK 返回到 File Watchers 页面，新文件监视器已添加到列表中：
请确保选中 已启用 复选框。
默认情况下，File Watcher 将在当前项目中可用。 要在其他项目中使用它，请从 全局 列表中选择 级别。