Laravel 压缩 CSS 时 var() 丢失解决方法

本文旨在解决在使用 Laravel 框架进行 CSS 压缩时，`var()` 属性被移除的问题。我们将探讨导致此问题的原因，并提供一些替代的 CSS 压缩方案，包括使用更新的 NPM 包、PHP 库以及在线 API，以确保 CSS 变量在压缩过程中得以保留。

在使用 Laravel 项目中进行 CSS 压缩时，开发者可能会遇到一个常见问题：CSS 自定义属性（使用 var() 函数引用）在压缩过程中被移除。这通常是由于使用的 CSS 压缩工具版本过旧，无法正确解析和处理 CSS 变量导致的。本文将介绍如何解决这个问题，并提供几种替代方案。

问题分析

旧版本的 CSS 压缩工具可能无法识别 CSS 变量，因此在压缩过程中会将包含 var() 的属性直接删除。例如，以下 CSS 代码：

:root {
  --primary-color: #1d85b9;
}

.info.icon-info {
  background: #fff;
  color: var(--primary-color) !important;
}

经过旧版本压缩工具处理后，可能会变成：

.info.icon-info {
  background: #fff;
}

color 属性被完全移除，导致样式显示不正确。

解决方案

要解决这个问题，核心在于使用能够正确处理 CSS 变量的 CSS 压缩工具。以下是几种可行的替代方案：

1. 使用 NPM 包 (css-minify)

如果你的项目使用了 Node.js 和 NPM，可以使用 css-minify 这个 NPM 包。它是一个相对较新的工具，并且能够正确处理 CSS 变量。

• 安装:

  npm install css-minify

• 使用示例:

  虽然直接在 Laravel 中使用 NPM 包可能需要额外的构建步骤（例如使用 Laravel Mix 或 Vite），但你可以将其集成到你的构建流程中。 例如，你可以在 package.json 中添加一个 script 来运行 css-minify，并在 Laravel Mix 或者 Vite 构建流程中调用这个 script。

  {
    "scripts": {
      "minify-css": "css-minify input.css > output.min.css"
    }
  }

  然后在命令行运行 npm run minify-css。

2. 使用 PHP 库 (matthiasmullie/minify)

matthiasmullie/minify 是一个 PHP 的压缩库，相对来说更新较为频繁，能够较好地支持 CSS 变量。

• 安装:

  composer require matthiasmullie/minify

• 使用示例:

  add('/path/to/your/css/file1.css');
  $minifier->add('/path/to/your/css/file2.css');
  $minifier->minify('/path/to/your/public/css/combined.min.css');
  ?>

  你需要将以上代码集成到你的 Laravel 应用中，例如在某个 Artisan 命令或服务提供者中。

3. 使用在线 API (Toptal CSS Minifier)

如果不想在本地安装任何工具，可以使用在线 API，如 Toptal CSS Minifier API。

• 使用示例:

  你可以使用 PHP 的 file_get_contents 或 Guzzle HTTP Client 来调用 API。

   [
          'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
          'method'  => 'POST',
          'content' => http_build_query(['input' => $css_code])
      ]
  ];
  $context  = stream_context_create($options);
  $minified_css = file_get_contents($api_url, false, $context);
  
  file_put_contents('/path/to/your/public/css/style.min.css', $minified_css);
  
  ?>

  同样，你需要将以上代码集成到你的 Laravel 应用中。

4. Laravel Mix 或 Vite 内置的压缩

Laravel Mix 和 Vite 已经集成了 CSS 压缩功能。 确保你的 laravel-mix 或者 Vite 相关依赖是最新版本，并且在 webpack.mix.js 或者 vite.config.js 中正确配置了 CSS 压缩。 通常情况下，它们会自动处理 CSS 变量，无需额外配置。

注意事项

• 缓存: 压缩后的 CSS 文件通常需要进行缓存控制，以确保浏览器加载的是最新版本。
• 测试: 在生产环境部署之前，务必测试压缩后的 CSS 文件，确保样式显示正确，没有出现任何问题。
• 版本控制: 保持 CSS 压缩工具的版本更新，以便获得最新的功能和修复。

总结

解决 Laravel 中 CSS 压缩导致 var() 属性丢失的问题，关键在于选择合适的 CSS 压缩工具。 优先考虑使用 Laravel Mix 或 Vite 内置的压缩功能，如果不行，可以尝试更新的 NPM 包或 PHP 库，或者使用在线 API。 确保选择的工具能够正确处理 CSS 变量，并进行充分的测试，以确保样式显示正确。 避免使用过时的技术，保持技术栈的更新，可以有效避免此类问题的发生。