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

Refuse to apply Style because of its MIME type - Slate .14 #976

Open SaroGFX opened 5 years ago

SaroGFX commented 5 years ago

Problem

Refused to apply style from 'https://192.168.1.36: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.

Replication steps

The code

style-tags.liquid

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

themes.scss.liquid

@charset "UTF-8";

body {
  background-color: blue;
}

theme.liquid 

<!doctype html>
<html lang="{{ shop.locale }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="">
  <link rel="canonical" href="{{ canonical_url }}">

  <title>{{ shop.name }}</title>
  <meta name="description" content="">

  {% include 'style-tags', layout: 'theme' %}
  {% include 'script-tags', layout: 'theme' %}

  {{ content_for_header }}

</head>

Please advise.

pless84 commented 5 years ago

I had the same issue, but once I fixed the SSL certificate it fixed this issue as well. Fixed the SSL issue by running mkcert -install

SaroGFX commented 5 years ago

I had the same issue, but once I fixed the SSL certificate it fixed this issue as well. Fixed the SSL issue by running mkcert -install

Thank you Pless84. I tried to run mkcert -install in the theme directory, but it promted me for a password. I accidently left it blank and now it's blocked. What password am I supposed to use and how can I recover and retry?

image

pless84 commented 5 years ago

The password is your user/root password

SaroGFX commented 5 years ago

@pless84 I think I managed to do a clean install.

I still get the error in Chrome, but no error in Firefox (although I have to say I didn't do any prior testing)

But dispite showing no error, it's not actually loading the CSS from the theme.scss.liquid

LeRoyJulian commented 5 years ago

Same problem for me and my SSL is working perfectly.

shooftie commented 4 years ago

The stylesheet that is not working is reported as being a different mime type. image

The stylesheet that is not working is the one that is prefetched. image

Once I switch the prefetch link to be a traditional stylesheet link the success rains down! image