指南针和Sass的Shopify主题

村村2020-03-23

有没有人有使用Compass和Sass开发Shopify主题的工作流程？我真的很亲近，我只需要弄清楚如何不在CSS液体标签上制作Sass barf。

这是我得到的：

目录中的sass / compass项目（例如：“ / newwebsite /”）
包含我的Shopify主题的子目录（“ / newwebsite / newwebsite-theme /”）
指南针config.rb，将css，_dir images_dir和javascripts_dir都指向它们的资产文件夹（“ / newwebsite / newwebsite-theme / assets /”）
指南针手表
shopify_theme gem也可以监视，将主题文件上传到shopify（https://github.com/Shopify/shopify_theme）
编辑Sass插值（请参阅下面的分析器）
编辑指南针回调以重命名为.css.liquid

问题：需要使用Shopify的液体模板标签时使用罗盘桶，例如背景图片-例如背景：url（“ {{” splash-1.jpg“ | asset_url}}”）

有谁知道如何指示Compass / Sass将液体模板标记吐入CSS中？如果有，我将拥有扎实的工作流程，可以在本地编辑Sass，然后在shopify商店中立即实现更改。

谢谢

编辑：通过使用下面的Hopper的答案为Sass中的Liquid标签，并将Compass输出的.css文件重命名为.css.liquid，我现在有了一个即时工作流，可以使用Compass和Sass设计Shopify主题！这是config.rb中的Compass回调的代码：

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
end

泡芙2020/03/23 11:46:38

无耻的插头...

我认为@nick在正确的轨道上。

在发送给Shopify之前编译scss更好。

对于其他找到此答案的人，我认为Quickshot是您正在寻找的工具。

您仍然需要对资产网址进行插值，但是quickshot将自动重新编译您的scss并将结果上传到shopify一步。这也使您能够@include在scss文件中使用。

http://quickshot.io/

https://github.com/internalfx/quickshot

小卤蛋梅2020/03/23 11:46:38

这部分地对我有用，但是我发现Shopify Theme应用程序很多时候不想上载我编辑的.css.liquid文件，因为显然它不认识该文件已被编辑。

为我解决的是在我的config.rb中使用以下代码，而不是上面问题中的代码：

on_stylesheet_saved do |filename|
  move_to = filename + ".liquid"
  puts "Moving from #{filename} to #{move_to}"
  FileUtils.mv(filename, move_to)
end

宝儿理查德2020/03/23 11:46:38

我写了一篇文章，描述了我用来使Compass和Sass与Shopify一起良好工作的方法。这与DOMUSNETWORK的答案相同。我会详细介绍文件结构。

http://www.mealeydev.com/blog/shopify-and-sass/

飞云2020/03/23 11:46:38

我发现保存后删除原始输出文件很有用，因此资产目录中没有多余的非流动文件。

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
  FileUtils.remove_file(filename)
end

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer