指南针和Sass的Shopify主题

SASS CSS

村村

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

第2749篇《指南针和Sass的Shopify主题》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
泡芙 2020.03.23

无耻的插头...

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

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

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

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

http://quickshot.io/

https://github.com/internalfx/quickshot

小卤蛋梅 2020.03.23

这部分地对我有用，但是我发现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

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

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

飞云 2020.03.23

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android