mcpField
H
hyva-compile-tailwind-css

hyva-compile-tailwind-css

github.com/hyva-themes开发851.3k 次安装13 周前更新
代码仓库

关于 hyva-compile-tailwind-css

用于编译 Magento 2 Hyvä 主题 Tailwind CSS 的技能，面向开发和维护主题样式的开发者。它支持生产构建与开发监听模式，并会先检查环境和主题。

主要功能

  1. 01生产环境 CSS 构建
  2. 02开发监听模式
  3. 03按环境设置命令包装器
  4. 04发现 Hyvä 主题

适用场景

  1. 01构建 Hyvä 主题的 CSS
  2. 02开发主题时监听样式变化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css

安装后在 Claude Code 中输入/hyva-compile-tailwind-css确认已加载。

详细介绍

为 Hyvä 主题编译 Tailwind CSS

为 Magento 2 中的 Hyvä 主题编译 Tailwind CSS。支持生产构建和开发监视模式。

步骤 1：检测环境并设置命令包装器

使用 hyva-exec-shell-cmd 技能检测环境并确定合适的命令包装器。以下 npm 命令均为核心命令；请根据检测到的环境为其添加包装器。

步骤 2：识别主题

如果未提供主题路径，请调用 hyva-theme-list 技能以查找可用主题。默认情况下，仅筛选 app/design/frontend/ 中的主题。vendor/hyva-themes/ 中的主题需要用户明确提出请求。

**如果未找到主题：**告知用户在 app/design/frontend/ 中未找到带有 Tailwind 配置的 Hyvä 主题。询问用户是否要改为检查 vendor/hyva-themes/，或是否需要先使用 hyva-child-theme 技能创建子主题。

步骤 3：安装依赖并构建

默认执行生产构建，除非用户明确要求“watch”、“watch mode”或“live reload”。

# Install deps only if node_modules missing
if [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then
  cd <theme-path>/web/tailwind && npm ci
fi

# Production build (default)
cd <theme-path>/web/tailwind && npm run build

# OR watch mode (only if explicitly requested)
cd <theme-path>/web/tailwind && npm run watch

步骤 4：验证输出

编译后的 CSS 位于：<theme-path>/web/css/styles.css

检查文件的修改时间，确认文件已更新。

故障排查

  • **缺少 node_modules：**运行 npm ci
  • **样式未更新：**清除浏览器缓存；在生产模式下运行 bin/magento setup:static-content:deploy

评论

支持 Markdown