Shopify主题现有SCSS文件转CSS遇到编译报错如何解决？

先定位报错核心原因 #

• 确认文件语法和后缀匹配：检查你手里的文件实际是缩进式Sass还是大括号式SCSS，后缀名和实际语法不匹配会直接触发批量报错。
• 排查是否混入Liquid语法：Shopify主题的SCSS文件常带有{{ }}、{% %}这类Liquid变量/逻辑标签，普通SCSS编译器无法识别这类非标准语法，这是最常见的报错诱因。
• 检查语法版本兼容性：旧版Ruby Sass、node-sass的很多语法（比如/做除法的旧写法、旧版@import规则）已经在新版Dart Sass中被废弃，用高版本编译器编译旧代码会批量抛出兼容错误。
• 确认导入路径配置：如果你的SCSS文件用到了@import、@use导入局部文件，编译器的包含路径配置错误会触发大规模的依赖找不到报错。

对应场景的解决方法 #

场景1：SCSS混有Liquid语法 #

• 方案一：暂时把所有Liquid标签替换为同类型的静态有效值（比如把{{ settings.primary_color }}替换为#333333），编译完成后再把对应位置的值替换回Liquid标签即可。
• 方案二：直接使用Shopify CLI编译，官方内置的编译工具天然支持带Liquid的SCSS语法，不需要额外修改代码，执行命令shopify theme dev即可自动完成编译。

场景2：Sass语法版本不兼容 #

• 安装对应版本的编译器：如果原主题用的是已废弃的node-sass，安装对应版本的编译包即可，示例命令：npm install node-sass@4.14.1 --save-dev
• 批量替换废弃语法：如果要适配新版Dart Sass，把旧版除法写法width: $width / 2替换为width: math.div($width, 2)，同时在文件头部添加@use "sass:math";即可消除兼容报错。

场景3：导入路径错误 #

• 编译时指定依赖目录，以node-sass编译为例，添加include-path参数指向局部样式文件的存放目录即可，示例命令：node-sass --include-path src/styles/partials src/styles/main.scss dist/main.css

无改动快速编译方案 #

如果不想修改现有SCSS代码，直接走Shopify官方编译流程即可：

1. 把完整的主题文件夹存放到本地
2. 在主题根目录执行shopify theme build
3. 编译完成的合规CSS文件会自动生成在assets目录下，不会出现语法报错。

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