如何通过Gulp将含Liquid语法的Scss编译为适用于Shopify的CSS文件

实现逻辑 #

Sass编译器原生不识别Liquid的{{ }}、{% %}语法，直接编译带Liquid的.scss文件会抛出语法错误。由于你的使用场景是Shopify主题开发，需要保留Liquid标记到最终CSS文件中供Shopify运行时解析，因此可以通过「编译前临时注释Liquid标记、编译后还原标记」的流程实现需求，无需修改文件后缀也能正常编译。

操作步骤 #

1. 安装所需依赖

npm install gulp-replace --save-dev

2. 调整Gulp样式任务配置
   修改后的完整代码如下：

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
const replace = require('gulp-replace');

sass.compiler = require('node-sass')

const styles = () => src('src/styles/theme.scss')
  .pipe(sourcemaps.init())
  // 编译前将Liquid标记包裹为Sass注释，避免编译报错
  .pipe(replace(/({{[\s\S]*?}}|{%[\s\S]*?%})/g, '/*<$1>*/'))
  .pipe(sass().on('error', sass.logError))
  // 编译完成后移除注释包裹，还原原始Liquid标记
  .pipe(replace(/\/\*<({{[\s\S]*?}}|{%[\s\S]*?%})>\*\//g, '$1'))
  .pipe(sourcemaps.write())
  .pipe(rename('theme.css'))
  .pipe(dest('dist/assets/'));

module.exports = styles;

如果你后续想把样式文件后缀改为.scss.liquid更方便语法高亮，只需要把src参数里的匹配规则改为src/styles/**/*.scss.liquid即可，无需其他调整。

可选方案（本地渲染Liquid场景） #

如果你使用的Liquid变量都是本地可配置的静态值，不需要Shopify运行时渲染，可以选择提前在本地渲染Liquid内容再编译Sass，最终输出不带Liquid标记的纯CSS文件：

1. 安装依赖

npm install gulp-liquid --save-dev

2. 调整任务配置，增加Liquid渲染步骤

const liquid = require('gulp-liquid');
// 引入本地Liquid变量mock文件
const liquidMockData = require('./path/to/your/mock-data.json');

const styles = () => src('src/styles/theme.scss')
  .pipe(sourcemaps.init())
  // 本地渲染Liquid变量
  .pipe(liquid({
    locals: liquidMockData,
    ext: '.scss'
  }))
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write())
  .pipe(rename('theme.css'))
  .pipe(dest('dist/assets/'));

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