Default theme, missing layout.theme.styleLiquid.scss.css?

[rshk]

Problem

On a freshly created project, CSS is not being loaded.

An error in the browser console reveals the issue:

Refused to apply style from 'https://192.168.x.x:3001/layout.theme.styleLiquid.scss.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Visiting directly https://192.168.x.x:3001/layout.theme.styleLiquid.scss.css returns an html page with the message

Cannot GET /layout.theme.styleLiquid.scss.css

Replication steps

Simply create a new theme project (set up with SSL certificate etc.) and yarn start.

More Information

Platform is Arch Linux, node v9.11.2

Everything else seems to be working fine, changed templates are updated on the fly etc.

[t-kelly]

Hey @rshk -- can you try inserting @charset "UTF-8"; at the top of your stylesheet?

[t-kelly]

Actually this URL shouldn't exist -- styleLiquid sheets should always be pulled from cdn.shopify.com not your local IP.

[t-kelly]

Regression from #850 on the style-tags.html. Thanks @rshk!

[subrb]

I'm running into this same problem, which is making the admin-bar/iframe at the bottom not work. All I've done is clone the Skeleton Starter theme repo. Seems to be breaking live-reload as well. Can you explain how you fixed this? Thanks

[bitwitch]

@subrb admin-bar is a different issue, see #420

[subrb]

Ran into a lot of issues updating Node to the current version. Going to try and downgrade.

Edit: did not work

[paulgrieselhuber]

Any word on progress here?

[LennonR]

I'm running into the same issue.

[gortexpet]

Same issue!
Slate: 1.0.0-beta.12
Node: v.8.9.4

[danielwilber]

Same issue. Is there any workaround for this?

[gortexpet]

Not a solution...but I did managed to resolve the issue...

Error disappeared when I built my local theme, uploaded to Shopify and then start working from that one. Maybe I missed a step in the documentation initially? I was working from one of the default themes while my local was the slate-starter.

My process:

• yarn create slate-theme custom-theme
• Install the SSL certificates + etc.
• yarn build and then yarn zip, so we have a built theme packaged in a .zip file.
• Upload this custom-theme-file.zip as your theme in Shopify admin.
• Active the new theme.
• Update your Theme ID in the .env file.
• yarn watch etc.

Hope this can help somebody!
I tested this with the default slate theme and the skeleton theme.

[kryali]

Same issue

Cannot GET /layout.theme.styleLiquid.scss.css

[t-kelly]

I've been away the past 2 weeks - will try and get this fixed ASAP!

[jarvisjohnson]

Yeah this definitely isn't working for local dev with scss.liquid files right now.

Similar to what @gortexpet was saying, you can run yarn deploy to get the files into Shopify and then yarn watch to get it all running/watching locally, but your changes to the scss.liquid files will not be watched - they would need to be deployed on each change at this point.

[t-kelly]

Fixed in v1.0.0-beta.13

[div-cowboy]

@t-kelly Thanks for working on this. v1.0.0-beta.13 is still not resolving that error for me. Do I have to do anything besides update the package?

[t-kelly]

@iamkratos you will need to run yarn start and let the new script-tags.liquid snippet upload to your dev store. You can check the dist/snippets/script-tags.liquid file and make sure that layout.theme.styleLiquid.scss.css is contained in the following Liquid tag:

{{ 'layout.theme.styleLiquid.scss.css' | asset_url }}

[james-prado]

@t-kelly in a new project on v1.0.0-beta.13 I checked dist/snippets/script-tags.liquid and layout.theme.styleLiquid.scss.css wasn't there, I found it in dist/snippets/style-tags.liquid still pointing to my local IP

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

and still getting the same error

Refused to apply style from 'https://192.168.x.x:3001/layout.theme.styleLiquid.scss.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Platform:
Ubuntu 18.04

Edit:
Manually bumped the @shopify/slate-tools pkg to 1.0.0-beta.13 and now it's fetching the css from the shopify cdn

[t-kelly]

Had another look at this and found the source of the problem.. liquidStyle files are not being uploaded to Shopify servers because of some bad filtering on my end. Refining that filtering to exclude liquid styles will make sure its uploaded and you don't get a MIME type error.

Also can see the original scss.liquid file gets output into dist which might cause problems if uploaded to Shopify.

[t-kelly]

Okay -- we should be good with v1.0.0-beta.14. Let me know!

[heydavee]

Hey i am currently trying to get Slate running in my local environment to develop a shopify theme ( Windows 10 )

I still got those errors even though i am using 1.0.0-beta.14 and the styling is completely missing.

Here a screenshot of my site with the starter theme
Image

Google Dev Console Error Message
Image

I have no idea what i did wrong. I installed Slate step by step like this

• Open a terminal and use the command
  yarn create slate-theme my-new-theme
• cd my-new-theme and edit the .env file with the correct data
• yarn start waiting for deploy - got some error messages

yarn start errors

• localhost:3000 opens up with above Google Dev console error messages ( sometimes more 406 errors )

• https is working
  https

Hope to get some help! Thanks for your time 👍

[t-kelly]

@DaveWoody your problem is unrelated. Please open a new issue.

[heydavee]

@t-kelly isn't it the exact same error? Nontheless i will open a new issue then.

[skillmatic-co]

v1.0.0-beta.14 fixes the CSS path issue, but I'm still seeing my local IP in my JS files as well.

For example /layout.theme.js is loading from my local IP instead of cdn.shopify.com.

[karlpeterson]

@skillmatic-co I'm having the same problem and it's making the live site hang. You can manually edit Snippets/script-tags.liquid in the Shopify Admin, but it would be nice if that wasn't necessary.

[t-kelly]

@skillmatic-co this is the intended behaviour for development, aka yarn start. For production where you want all files pointing to Shopify CDNs, you use yarn deploy

[lock]

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.