将Sass中的Liquid编译为Css（Gulp + Scss + Shopify）

Question

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

在
```
.scss
```
文件中使用液体
然后将所有
```
.scss
```
文件编译为
```
.css
```

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

.scss

文件编译为唯一的

theme.css

文件。我想在我的

.scss

文件中使用液体，然后仍然将所有这些编译为

.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;

Answer 1

这里有一篇文章讨论了这个问题： https://ablesense.com/blogs/news/using-gulp-to-compile-sass-liquid-tags

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

#{' your escaped {{ liquid tags }} here '}

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

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

:root

中的

<head>

中。

你的SASS：

btn.primary {
    background-color: var(--color-btn-primary);
}

在液体的

<head>

中。布局：

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

这里详细介绍了这一点：

https://www.shopify.com.au/partners/blog/deprecating-sass

Answer 2

我有同样的问题，无法将liquid-scss编译成css，你找到解决方案了吗？

将Sass中的Liquid编译为Css（Gulp + Scss + Shopify）

问题描述投票：0回答：2

2个回答

最新问题

将Sass中的Liquid编译为Css（Gulp + Scss + Shopify）

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2