Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gulp task to compile Shopify Liquid tags in SASS with Autoprefixer
var gulp = require('gulp');
var sass = require('gulp-sass');
var replace = require('gulp-replace');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
gulp.task('compilesass', function() {
// root SASS file (contains all your includes)
return gulp.src('./sass/style.scss')
// compile SASS to CSS
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
// add vendor prefixes
// change the file name to be a liquid file
// remove the extra set of quotations used for escaping the liquid string
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
// save the file to the theme assets directory
gulp.task('default', function() {
// watch all SASS (.scss) files['./sass/**/*.scss'], ['compilesass']);
.classname {
// note the extra set of double quotes
background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'});
Copy link

IGordiichuk commented Sep 16, 2022

What if I have in theme.scss.liquid liquid tags - {% ... , ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment