search

pixelcabin / ziplines

Ziplines is a quick command line tool to help you get set up with an integrated Shopify workflow that supports a stable multi-developer workflow, VCS, the full feature-set of SASS, JS hinting and compression, and much more!
http://ziplines.pixelcab.in
37 stars 6 forks source link

Import to application.scss.liquid instead of compile to application.css #3

Open seanwash opened 9 years ago

seanwash commented 9 years ago

First off, thanks for this excellent module. It has already saved me a bunch of time!

I ran into a situation earlier where some images weren't pulling the latest version from the CDN. After a bit of research I learned it was because I wasn't using the liquid helper asset_url. The problem with using these helpers is that the sass compiler will throw because they aren't valid sass. My solution was to use https://github.com/graygilmore/grunt-shopify-sass and instead of compile to a css file, I import all of my sass files into one manifest file and send that to shopify with a .liquid extension so that it can do its thing.

If I need to clarify that, please let me know. Also, I'd be happy to send a PR at some point if this is something you're open to.

michaelrshannon commented 9 years ago

Hi @seanwash - thanks for raising this! I'll take a look into this and get back to you.

michaelrshannon commented 9 years ago

Hi @seanwash - I actually hadn't come across the grunt-shopify-sass plugin until you raised it - we have been getting around the inability to use asset_url in our sass by placing any css image references inline within the rest of the store liquid, but this plugin looks really interesting. Let me get up to speed with how it works, and I'll get back to you on integrating into Ziplines. Glad you found this useful so far!

michaelrshannon commented 8 years ago

Hi @seanwash - I had a look through, and it certainly seems like a great plugin for some use cases. The main downside I could see what that it would require skipping any compression/minification of the compiled css (as it still renders out scss for Shopify to compile), which was one of the key aims of this workflow. I think this would be a great option for people to have if they need it, so was thinking instead that I'd write up a wiki page on adding this in, so that those that do want to use it can add it to their gruntfile once it's all setup. I'll let you know once this is complete, as I'm sure you may have some useful input!

seanwash commented 8 years ago

Hey @michaelrshannon that sounds perfectly fine to me! Either way, this project saved me a whole lot of time over the past few weeks. Cheers!

mcpatten commented 8 years ago

Hey guys, I work as a developer on the Themes team at Shopify, and we've run into this problem as well.

For what it's worth, we've recently begun using postcss internally to get around some of these issues.
My colleague @harismahmood89 has a good example of how to use postcss for this purpose at the following link -> https://github.com/harismahmood89/shopify-theme-dev-postcss.

Also, as long as you're concatenating your sass files into a single scss.liquid prior to upload, Shopify will handle minification/gzip automatically.

Hope this helps, we really like your project by the way. :smile:

michaelrshannon commented 8 years ago

Hey @m-ux - this looks really interesting, and could introduce a new potential solution to a complex multi-store deployment that we're working on at the moment. Will definitely check out, and great to know that *.scss.liquid files are being minified by Shopify.

Glad to hear you guys think Ziplines has been a useful addition to the community - we're excited to see how we can expand its functionality to support the upcoming Sections feature announced at Unite when that starts rolling out :grinning: