将Sass中的Liquid编译为Css（Gulp&x2B；Scss&x2B；Shopify）

我想知道是否有解决办法：

• 在

  .scss

  文件中使用液体
• 然后将所有

  .scss

  文件编译为

  .css

现在，我正在使用一个自定义主题启动程序，它使用gulp将我的

.scss

文件编译成一个唯一的

主题.css

文件。我想在

.scss

文件中使用liquid，然后仍然将所有这些编译成

.css

目前，我无法将

.scss.liquid

添加到我的文件中，因为如果我这样做，编译器会崩溃，因为它显然无法识别

.liquid

扩展名。我发现谈论如何将文件编译到

.scss.liquid

，但这不是我想要的，因为Shopify将来不会使用scss。我想直接编译到

.css

以下是我的当前任务对于我的sass文件的外观：

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

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

const styles = () => src('src/styles/theme.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write())
  .pipe(rename('theme.css'))
  .pipe(dest('dist/assets/'));

module.exports = styles;

---

这里有一篇文章讨论了这个问题：

实际上，在SASS中编译液体标签的解决方案是使用SASS中的本机功能，该功能允许您转义字符串

#{“您的转义{{liquid tags}}}here'}

，这将允许将linting和transpiling转换为CSS，然后使用postss将输出重新格式化为干净的液体标签

一个可以说是更好的选择是完全跳过这个问题，在SASS中使用CSS变量，同时将液体变量添加到layout.liquid的

中的

：root

你的俏皮话：

btn.primary{
背景色：var（--彩色btn主色）；
}

在liquid.layout的

中：

{% style %}
  :root {
    --color-btn-primary: {{ settings.color_button }}
  }
{% endstyle %}

这里详细介绍了这一点：

---

谢谢你的回答。我已经读过这篇文章，主要问题是它编译为.scss.liquid而不是.css。但是我发现创建一个css-variables.liquid文件，将它导入到我的theme.liquid中，并在我的sass中使用css变量作为变量的值（例如$color text:var（--color text）