search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

slate-tools start generating style-tags.liquid without including theme.scss. #1024

Open sarhov opened 5 years ago

sarhov commented 5 years ago

Problem

When I slate-tools build, it generate correct style-tags.liquid.

{%- if layout == 'theme' -%}
<link type="text/css" href="{{ 'layout.theme.css' | asset_url }}" rel="stylesheet">
{%- else -%}
<link rel="prefetch" href="{{ 'layout.theme.css' | asset_url }}" as="style">
{%- endif -%} {%- if layout == 'theme' -%}
<link type="text/css" href="{{ 'layout.theme.styleLiquid.scss.css' | asset_url }}" rel="stylesheet">
{%- else -%}
<link rel="prefetch" href="{{ 'layout.theme.styleLiquid.scss.css' | asset_url }}" as="style">
{%- endif -%} {%- if template == 'product' -%}
<link type="text/css" href="{{ 'template.product.css' | asset_url }}" rel="stylesheet">
{%- else -%}
<link rel="prefetch" href="{{ 'template.product.css' | asset_url }}" as="style">
{%- endif -%}

But slate-tools start command generating style-tags.liquid where only styleLiquid scss is included


    {%- if layout == 'theme' -%}
      <link type="text/css" href="{{ 'layout.theme.styleLiquid.scss.css' | asset_url }}" rel="stylesheet">
    {%- else -%}
      <link rel="prefetch" href="{{ 'layout.theme.styleLiquid.scss.css' | asset_url }}" as="style">
    {%- endif -%}

More Information

OS: WIndows 10 Node: v10.15.3 npm: 6.9.0

The same issue with yarn build.

curiouscrusher commented 5 years ago

@sarhov I just ran into this issue today also. I'll follow up if I find out what's going on with the different results.

LucaDe commented 5 years ago

Same issue here. Did you find any workarounds?

curiouscrusher commented 5 years ago

@LucaDe After looking at the generated code deeper it turns out that both the outputs are correct, the slate-tools build command simply generates the extra prefetch links that are useful in production, as well as including the additional product styles chunk.

I ran into this when I was debugging an IE 11 error that I thought was related to missing code, turns out it was actually just in need of a polyfill 🤷‍♂ So to me it doesn't seem like there's actually an issue here, just an expected difference in the production code vs dev/HMR code.

sarhov commented 5 years ago

@sarhov I just ran into this issue today also. I'll follow up if I find out what's going on with the different results.

@curiouscrusher

No solution yet, I am continuing use ThemeKit instead.

curiouscrusher commented 5 years ago

@sarhov what's the problem you're having here? Are you running into missing compiled assets, or just looking to find out what the differences in asset url's are for?