Last active
February 13, 2023 08:04
-
-
Save derekmorash/1e82ff9ffdf675ce00af7d0c3c99fb0c to your computer and use it in GitHub Desktop.
Gulp task to compile Shopify Liquid tags in SASS with Autoprefixer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.classname { | |
// note the extra set of double quotes | |
background-image: url(#{'"{{ \'awesome-hero-image.jpg\' | asset_url }}"'}); | |
} |
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
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 !