PyCharm 2025.2 Help

压缩 CSS

缩小化压缩是指移除所有不必要的字符,如空格、新行、注释,而不改变源代码的功能。 在开发和调试过程中,这些字符使代码更易读。 在生产阶段,它们只会增加需要传输的代码量。

最常见的是,压缩是作为构建过程中使用 webpack 之类工具的一个步骤来完成的。 如果您不使用构建工具,您可以使用独立工具,例如 CSSOcssnano

要自动压缩您的代码,您需要安装一个压缩工具并配置一个 File Watcher ,该工具将跟踪您的文件更改并运行压缩工具。

默认情况下,CSS 文件在 File Watcher 的作用作用域内被更改并保存时,会立即开始压缩。 您可以指定其他 触发工具的事件。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,该文件的名称为源 CSS 文件的名称和扩展名 min.css 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在源 CSS 文件下方,源 CSS 文件显示为一个节点。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1配置文件嵌套

下面的示例显示了如何使用 CSSO 直接从 PyCharm 压缩您的 CSS 代码。

示例:使用 CSSO 压缩 CSS

要自动压缩您的代码,您需要安装 CSSO 并配置一个 CSSO File Watcher ,它将跟踪文件更改并运行该工具。

默认情况下,CSS 文件在 File Watcher 的作用作用域内被更改并保存时,会立即开始压缩。 您可以指定其他 events that invoke CSSO。 请了解更多有关 File Watchers的信息。

生成的压缩代码存储在一个单独的文件中,该文件的名称为源 CSS 文件的名称和扩展名 min.css 。 此生成文件的位置在 要刷新的输出路径 字段中定义,位于 新观察器对话框内。 但是,在 项目树 中,包含压缩代码的文件显示在源 CSS 文件下方,源 CSS 文件显示为一个节点。 要更改此默认显示方式,请在 项目 工具窗口 Alt+1配置文件嵌套

开始之前

  1. 请确保您的计算机上安装了 Node.js

  2. 确保在 设置 | 插件 页面的 已安装 选项卡上启用了所需的 CSS文件监视器插件。 如需了解更多信息,请参阅 管理插件

全局安装 csso-cli

  • 在嵌入的 终端 (Alt+F12 )中,输入:

    npm install -g csso-cli

创建 CSSO File Watcher

  1. 设置 对话框(Ctrl+Alt+S )中,点击 文件监视器 下的 工具File Watchers 页面 显示了已配置的 File Watchers 列表。

  2. 点击 添加按钮 或按 Alt+Insert 并从列表中选择 CSSO CSS 优化器 预定义模板。

    创建 CSSO 监视器:点击 Add 并选择模板

    新监视器 对话框将打开。

  3. 请在 程序 字段中指定 csso 可执行文件的位置。

    如果您通过 csso-cli Node Package Manager 安装,PyCharm 将自动定位包并使用 csso 别名自动填写字段。否则,请手动输入路径或点击 并在打开的对话框中选择文件位置。

  4. 接受默认的文件监视器设置,或根据需要按照 文件监视器 中的描述重新配置它们。

    在此示例中,默认值如下:

    • -i $FileName$ -o $FileNameWithoutExtension$.min.css 位于 参数 字段中。

    • $FileNameWithoutExtension$.min.css 位于 要刷新的输出路径 字段中。

    • $FileDir$ 位于 工作目录 字段中。

    创建 CSSO 监视器:带有默认设置的新建监视器对话框

    点击 确定 返回到 文件监视器 页面,新文件监视器已添加到列表中:

    创建 CSSO 监视器:已将新监视器添加到列表中
  5. 请确保选中 已启用 复选框。

    默认情况下,File Watcher 将在当前项目中可用。 要在其他项目中使用它,请从 全局 列表中选择 级别

最后修改日期: 2025年 9月 26日