Skip to content

Instantly share code, notes, and snippets.

Embed
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
.pipe(autoprefixer())
// change the file name to be a liquid file
.pipe(concat('style.css.liquid'))
// remove the extra set of quotations used for escaping the liquid string
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
// save the file to the theme assets directory
.pipe(gulp.dest('./assets/'));
});
gulp.task('default', function() {
// watch all SASS (.scss) files
gulp.watch(['./sass/**/*.scss'], ['compilesass']);
});
.classname {
// note the extra set of double quotes
background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'});
}
@KevinChauvet
Copy link

KevinChauvet commented Aug 10, 2021

Not for me ...
After some research I have this code now :

var gulp = require('gulp');
const sass = require("gulp-sass")(require("node-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/theme.scss')
// compile SASS to CSS
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
// add vendor prefixes
.pipe(autoprefixer())
// change the file name to be a liquid file
.pipe(concat('theme.css.liquid'))
// remove the extra set of quotations used for escaping the liquid string
.pipe(replace('"{{', '{{'))
.pipe(replace('}}"', '}}'))
// save the file to the theme assets directory
.pipe(gulp.dest('./assets/'));
});

gulp.task('default', function() {
// watch all SASS (.scss) files
gulp.watch(['./sass/*.scss'], gulp.series('compilesass'));
});

But still not working !

@IGordiichuk
Copy link

IGordiichuk commented Sep 16, 2022

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