Shopify停止主题SCSS支持后，含Liquid语法的SCSS转CSS解决方案咨询

你遇到的这个问题确实很头疼——SCSS编译器不认Liquid语法，直接编译肯定报错，自己写的脚本又覆盖不了所有边缘情况。下面给你几个更靠谱的解决方案，按推荐度排序：

1. 直接用Shopify官方CLI（最优解） #

你说希望用Shopify官方的SCSS编译器，其实Shopify CLI本身就自带这个能力！这绝对是最省心的方案，官方工具天生就兼容Liquid和SCSS的混合写法，完全不用自己处理语法冲突。

操作步骤很简单：

• 先确保安装了最新版的Shopify CLI：可以通过npm install -g @shopify/cli或者RubyGems安装
• 进到你的主题目录，运行shopify theme dev（开发时实时编译）或者shopify theme build（生产环境打包）
• CLI会自动处理所有SCSS文件，编译后的CSS会保存在assets目录里，完整保留所有Liquid变量和逻辑，完全符合Shopify的要求

这个方法彻底避开了自己写脚本的麻烦，官方已经把所有Liquid和SCSS混合的边缘场景都处理好了。

2. 优化你的Ruby脚本的匹配逻辑 #

如果因为某些限制不能用CLI，那可以改进你现有的脚本，用更精准的正则来匹配所有Liquid标签，而不是只看行开头：

替换你脚本里的字符串处理部分为：

# 匹配所有Liquid输出标签 {{ ... }}（包括带空格的情况）
line = line.gsub(/{{\s*(.*?)\s*}}/, 'unquote("{{\1}}")')

# 匹配所有Liquid逻辑标签 {% ... %}、{%- ... -%}
line = line.gsub(/{%-?\s*(.*?)\s*-?%}/, '/*lsc \0 lsc*/')

这样不管Liquid标签在一行的哪个位置，都能被正确处理：

• 输出标签会被转成SCSS能识别的unquote("{{...}}")，编译后再把包裹的unquote("和")去掉
• 逻辑标签会被CSS注释包裹，SCSS编译器会直接忽略它们，编译后再移除注释标记

另外，记得在编译完成后加一步清理操作，还原Liquid语法：

# 清理编译后的CSS文件
File.open(output_file, 'r+') do |f|
  content = f.read
  # 移除unquote包裹
  content = content.gsub('unquote("', '').gsub('")', '')
  # 移除Liquid逻辑标签的注释标记
  content = content.gsub(/\/\*lsc\s*(.*?)\s*lsc\*\//m, '\1')
  f.rewind
  f.write(content)
  f.truncate(f.pos)
end

3. 用PostCSS插件处理 #

另一个思路是用PostCSS结合postcss-scss解析器，它能识别SCSS语法，同时允许你写自定义插件保留Liquid标签：

1. 先安装依赖：npm install postcss postcss-scss autoprefixer
2. 写一个简单的PostCSS插件，标记Liquid标签让编译器跳过：

const postcss = require('postcss');
const fs = require('fs');

const preserveLiquid = postcss.plugin('preserve-liquid', () => {
  return root => {
    // 处理Liquid输出标签
    root.walk(node => {
      if (node.value) {
        node.value = node.value.replace(/{{\s*(.*?)\s*}}/g, '__LIQUID__$1__LIQUID__');
      }
      if (node.selector) {
        node.selector = node.selector.replace(/{{\s*(.*?)\s*}}/g, '__LIQUID__$1__LIQUID__');
      }
    });
    // 处理Liquid逻辑标签（比如{% assign %}、{% comment %}）
    root.walkComments(comment => {
      comment.text = comment.text.replace(/{%-?\s*(.*?)\s*-?%}/g, '__LIQUID_LOGIC__$1__LIQUID_LOGIC__');
    });
  };
});

// 执行编译和还原
postcss([preserveLiquid, require('autoprefixer')])
  .process(fs.readFileSync('input.scss', 'utf8'), { syntax: 'postcss-scss' })
  .then(result => {
    let css = result.css;
    // 还原Liquid标签
    css = css.replace(/__LIQUID__(.*?)__LIQUID__/g, '{{$1}}');
    css = css.replace(/__LIQUID_LOGIC__(.*?)__LIQUID_LOGIC__/g, '{%$1%}');
    fs.writeFileSync('output.css', css);
  });

这个方法比Ruby脚本更灵活，PostCSS的生态也能帮你处理自动前缀等额外需求。

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