我想知道是否有解决方案:
- 在
.scss
文件中使用液体 - 然后将所有
.scss
文件编译为.css
现在,我正在使用一个自定义的主题启动器,它使用gulp把我的.scss
文件编译成一个唯一的theme.css
文件,我想在我的.scss
文件中使用liquid,然后仍然把所有这些编译成.css
。
现在,我不能添加.scss.liquid
到我的文件中,因为如果我这样做,那么编译器就会崩溃,因为它显然不识别.liquid
扩展名。我发现an article讨论如何将文件编译到.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;
1条答案
按热度按时间iyzzxitl1#
这里有一篇文章介绍了这个问题:https://ablesense.com/blogs/news/using-gulp-to-compile-sass-liquid-tags
在SASS中编译liquid标签的有效解决方案是使用SASS中的原生特性,该特性允许您转义字符串
#{' your escaped {{ liquid tags }} here '}
,这将允许将linting & transpiling转换为CSS,然后使用PostCSS将输出重新格式化为干净的liquid标签。一个更好的选择是完全跳过这个问题,在SASS中使用CSS变量,同时将liquid变量添加到布局的
<head>
中的:root
。liquid您的SASS:
在液体的
<head>
布局中:此处详细介绍了这一点:https://www.shopify.com.au/partners/blog/deprecating-sass