Shopify 具有 Liquid 語法的 SCSS 無法轉換為 CSS

Question

Shopify 最近決定在他們的主題中停止支持 SCSS 。 我想將所有 SCSS 文件更改為 CSS，但這已成為一場噩夢，因為其中包含流動語法。 這是一個例子：

// Overlays
$color-overlay-title-text: {{ settings.color_image_overlay_text }};
$color-image-overlay: {{ settings.color_image_overlay }};
$opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};

{%- comment -%}
  Based on the image overlay opacity, either lighten or darken the image on hover
{%- endcomment -%}
{% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %};

{% if image_overlay_opacity > 0.85 %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %};
{% else %}
  {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %};
{% endif %}
$hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};

當我嘗試通過在線找到的 scss 編譯器運行它時，它在第一個{{ 、 {%或{%-時失敗，因為這不是有效的 scss 語法。 我想要的最終結果是一個有效的 css 文件，它保留了流動的語法。

我的下一個想法是預編譯文件並將液態語法包裝在unquote("")或 css 注釋中，以便稍后刪除，然后將其傳遞給從這里分叉的 ruby scss 編譯器。 像這樣的東西：

require 'tempfile'
require 'fileutils'

files = ARGV[0]
input_file, output_file = [files.split(":")[0], files.split(":")[1]]
puts "Converting file: #{input_file}"

path_to_compiler = "./lib/ruby-sass/bin/scss"
tmp_path = "./tmp"

# Replace liquid syntax with something SCSS can parse
temp_file = Tempfile.new('tmpscss')
begin
  File.open(input_file, 'r') do |file|
    file.each_line do |temp_line|
      line = temp_line

      # Trying to account for edge cases in liquid syntax
      if line[0..1] == "{{"
        line = line.gsub("{{", "/*lsc {{").gsub("}}", "}} lsc*/")
      else
        line = line.gsub("{{", "unquote(\"{{").gsub("}}", "}}\")")
      end

      if line.include?("comment")
        line = line.gsub("{%- comment -%}", "/*lsc {%- comment -%}").gsub("{%- endcomment -%}", "{%- endcomment -%} lsc*/")
      else
        line = line.gsub("{%", "/*lsc {%").gsub("%}", "%} lsc*/")
      end
      temp_file.puts line
    end
  end
  temp_file.close
  FileUtils.mv(temp_file.path, tmp_path)

  puts "#{temp_file.path}:#{output_file}"

  # Pass to SCSS compiler
  system "ruby #{path_to_compiler} -C .#{temp_file.path}:#{output_file}"
ensure
  temp_file.close
  temp_file.unlink
end

puts "Output file to: #{Dir.pwd}/#{output_file}"

這對於幾行來說是成功的，但是對於我試圖解析它的原始邏輯來說有太多的邊緣情況，並且從 scss 到 css 的轉換將不可避免地失敗。 必須有更好的方法來做到這一點。 有人有什么想法嗎？ 我希望 Shopify 允許我們使用他們的 SCSS 編譯器。

Answer 1

據我所知，沒有可以轉換scss.liquid的程序。 scss.liquid通常具有鏈接到您商店中的settings_data.json的變量，這是獨一無二的，還有許多 mixin function。 除了：

0. 獲取更新的主題。

1. 渲染時從頁面源中獲取文件。

2. 從 SCSS 中取出所有liquid並轉換。

3. 使用 CSS 和液體重新編碼文件。 使用var()代替 sass 中的變量。 這是最痛苦的方式。

    {% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %}; {% if image_overlay_opacity > 0.85 %} {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %}; {% else %} {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %}; {% endif %} // Overlays:root { --color-overlay-title-text: {{ settings.color_image_overlay_text }}; --color-image-overlay: {{ settings.color_image_overlay }}; --opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }}; --hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }}; }

Answer 2

這有什么好運氣嗎？ 我也希望將 shopify 主題從 scss 遷移到 css 但液體阻礙了。

我成功 escaping '{{' 使用以下：

$product-accordion-title-size: #{'"{{ settings.font_product_accordion_title_size }}"'}px;

但我遇到了許多其他極端情況問題。 即讓編譯器在通過 scss function 時接受注釋掉的值：

      border-color: darken($color-button-bg,10%);

其中參考：

$color-button-bg: #{'"{{ settings.color_btn_bg }}"'};

這最終會破壞編譯器，因為它期望在那里有一個值。

目前我正在考慮實際處理每個有 scss function 的情況，找到相應的值並手動輸入，因為我沒有任何 npm 包聲稱將 Z466DEEC76ECDF5FCA6D385config1 轉換為 scs.

我意識到這本身就是一個問題，但希望關於評論的部分能幫助你並算作答案¯\_(ツ)_/¯。 一篇關於注釋掉一些液體的文章。