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

Strange link to stylesheet. Get's 404 error #888

Closed Magnusvb closed 5 years ago

Magnusvb commented 5 years ago

I get a 404 error on the stylesheet, running the site on localhost. When checking it with the web inspector, it looks like this:

https://10.0.1.6:3001/layout.theme.styleLiquid.scss.css

The file name seems a bit odd? (It's my first time with Slate v1, so it's maybe correct?)

It's a fresh installation of the latest beta 14 and I run yarn start to upload

t-kelly commented 5 years ago

@Magnusvb can you please check and paste the contents of your dist/snippets/style-tags.liquid file?

Magnusvb commented 5 years ago

@t-kelly Here are the content:

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

(Now I understand from where the href comes...)

Update: I also run a yarn zip - and this is the content of style-tags:

{%- 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 -%}

The if-block is repeated twice, and the first one seems correct (?)

UPDATE 2: Now I'm all confused. Despite getting a 404 on the style sheet - if I change the background color for the html element (in layout.scss) the change is picked up!?

937aaron commented 5 years ago

Was getting the same issue in package.json I had "@shopify/slate-tools": "1.0.0-beta.12"

updated to "@shopify/slate-tools": "1.0.0-beta.14"

re ran npm install and the bug seems to be resolved.

@Magnusvb

Magnusvb commented 5 years ago

@937aaron Thanks for the tip. I also did a rerun (yarn install). Now I don't get a 404 on the stylesheet, and the link look like this:

<link type="text/css" href="//cdn.shopify.com/s/files/1/0093/8265/8107/t/3/assets/layout.theme.styleLiquid.scss.css?14630494240141035077" rel="stylesheet">

Should it not be loaded from localhost, or am I miss understand?

huguestennier commented 5 years ago

Anything .liquid needs to be uploaded to Shopify's servers so it's normal that you see the CDN url. Only your CSS (not .scss.liquid) and JS assets are served locally.

You can find more info on Local development in the Wiki.

t-kelly commented 5 years ago

Everything looks to working as intended here. Closing!

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.