-
-
Save derekmorash/1e82ff9ffdf675ce00af7d0c3c99fb0c to your computer and use it in GitHub Desktop.
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 }}"'}); | |
} |
I removed the the extra quotes right before the {{ and }} tags and it seems to be working fine now :)
Here's how it looks:
@function shopify_asset($file) { @return unquote('url(\'{{ "'+ $file + '" | asset_url }}\') '); }
Not sure if this is properly formatted, though. If someone comes up with a better solution I'd love to hear!
What about %{ if... ?
What about %{ if... ?
@jack-fdrv did you find a good approach for liquid expressions that use {% ?
Guys i have tried this but the output in my css.liquid is just the setting without the {{ }} so its not working... can someone help me out with this issue?
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 !
Hi.
What if I have in theme.scss.liquid liquid tags - {% ... , ?
Hey @joemottershaw
Those functions seem to be exactly what I need since configuring Gulp has been a real pain.
I just tried to use it as exactly as you have but it's returning a bad URL (https://cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/%22/cdn.shopify.com/s/files/1/0254/4379/5053/t/3/assets/urn.png?475%22), do you have any idea why?
Btw, did you come up with a better solution yet?
Thank you!