如何在Shopify的Liquid主题语言中实现CSS框架

• 第一步：选择适配的CSS框架，优先选择支持按需剪裁、可配置的框架（如Tailwind CSS、UnoCSS），降低后续适配成本
• 第二步：安装框架及配套依赖，通过包管理工具执行安装命令，以Tailwind CSS为例：npm install tailwindcss postcss autoprefixer
• 第三步：配置框架扫描规则，执行初始化命令生成配置文件，在配置的content字段中填入Shopify主题所有用到样式类名的文件路径，示例：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./layout/**/*.liquid",
    "./sections/**/*.liquid",
    "./snippets/**/*.liquid",
    "./assets/**/*.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

同时将框架对应的编译插件添加到PostCSS配置文件中

• 第四步：引入框架全局样式，在主题的全局CSS入口文件中添加框架的基础样式指令，示例：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 第五步：集成到工作流构建环节，配置构建工具（Vite/Gulp/Shopify CLI内置构建能力）将编译后的CSS文件输出到主题的assets目录下，之后在layout/theme.liquid的head标签中引入编译后的样式文件：{{ 'compiled.css' | asset_url | stylesheet_tag }}
• 第六步：本地验证生效，启动Shopify CLI本地预览服务，在任意liquid文件中添加测试类名，确认样式正常渲染即可

• 扫描路径配置错误：框架的内容扫描路径未覆盖所有用到样式类名的liquid、js文件，会导致按需引入的类名被误剪裁，样式不生效
• Liquid语法冲突：CSS框架的特殊语法（如Tailwind的方括号动态值语法w-[300px]）会被Liquid解析器识别为变量语法，导致类名解析异常，需要用{% raw %}{% endraw %}包裹对应类名代码块，或是调整框架的类名生成规则规避特殊字符
• 原有样式优先级冲突：Shopify主题自带的原有样式存在高权重选择器或是!important规则，会覆盖框架的样式，可通过调整CSS文件引入顺序、提升框架样式权重解决
• 动态类名未加入安全列表：如果你的类名是通过Liquid动态拼接生成的（如class="bg-{{ product.tag }}"），框架无法静态扫描到对应类名，会导致样式缺失，需要将这类动态使用的类名提前加入框架的safelist安全列表中
• 构建同步异常：编译后的CSS文件未自动同步到Shopify的assets目录，或是Shopify CLI热更新未触发样式刷新，会导致修改后看不到效果，需要检查工作流的文件同步配置
• 体积超出限制：如果未开启按需剪裁直接引入全量CSS框架代码，会导致CSS文件体积过大，超出Shopify对单个asset文件的大小限制，同时也会触发Shopify的性能检测警告

内容的提问来源于stack exchange，提问作者nicklocicero